Validating the input field in the VF Page

Question

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

Answer 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>