0

I am trying to Validate the user input in the VF Page. This custom field is a Text data type and the Maximum length is 6. In the VF Page I need to make sure this field entered is a numeric and cannot be less than/ more than 6 digits, tried the validation using the javascript like below but it is not throwing the error

<apex:inputField value="{!oppRec.Str__c}" required="true" onchange="checkStr();" >
    <apex:actionSupport event="onchange" reRender="form" status="status"/>
</apex:inputField >
<div id="err1"></div>
<script type="text/javascript">
function checkStr(){
    var phone=document.getElementById("j_id0:j_id2:j_id4:j_id31:j_id34:j_id35").value;
    var letters = /^[A-Za-z]+$/;
    if(phone.length!=6 || phone.match(letters))
        document.getElementById("err1").innerHTML="Number must be 6 digits long. OR Can not contain Letters.";
}
</script> 

I dont see any validation error throwing on the sreen when I enter characters in the filed or put the numbers less than 6 digits. Also is there a way I can show the error message inline with in the filed like how it shows for the Required field and all. Any help is greatly appreciated

1

Your code basically works - one issue might be the way in which you are selecting the input element. If anything changes on the page the id - "j_id0:j_id2:j_id4:j_id31:j_id34:j_id35", will also change since this describes the elements position in relation to other page elements.

Personally I normally solve this by explicitly adding an id:

<apex:inputField value="{! l.phone}"  id="phone">

</apex:inputField>

this will append the string to the end of the generated id, you can then use a selector to identify an element that ends in this value :

 var phone=document.querySelector("[id$='phone']").value;

Secondly, your change event only fires when the input loses focus, so you won't run the validation when typing. If you want to run the validation when typing, you should instead use an oninput handler, which must be passed through as "html-oninput".

Thirdly, if you want the validation to disappear when the input is correct, you'll have to reset the error div text when the input is correct.

Example:

    <apex:form>        
        <apex:inputField value="{! l.firstname }" required="true" html-oninput="checkStr();" id="phone">
            <apex:actionSupport event="onchange" reRender="err1" status="status"/>
        </apex:inputField >
        <div id="err1"></div>
                <apex:commandbutton onclick="checkStr();" action="{!save}" value="save" />

    </apex:form>
    <script type="text/javascript">
function checkStr(){
    var phone=document.querySelector("[id$='phone']").value;
    var letters = /^[A-Za-z]+$/;
    if(phone.length!=6 || phone.match(letters)){
        document.getElementById("err1").innerHTML="Number must be 6 digits long. OR Can not contain Letters.";
    event.preventDefault();
        return true;
    }else{
        document.getElementById("err1").innerHTML=""; 
    }
}
</script> 
2
  • Thanks for taking time to help. The issue is even after I tried entering the characters in the field it allowed me to save. Is there a way we can restrict VF page not allow the users to save the record until the Validation error is fixed
    – user81642
    Jan 19 at 20:57
  • There sure is - you can add an onclick handler to the submission button and prevent submission in the case of failed validation. I'll edit my answer.
    – eaeaoo
    Jan 19 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.