0

I need to validate few input fields in the VF Page, the validation is to make sure all these fields entered are 6 digits in length and cannot contain alphabets. Not all the fields are required, user may or may not enter them, if they enter it it should be of 6 digits not more or less. I tried couple of logic but it is not working as expected, I tried just setting up the min and max using the apex:inputField like it is not working

<apex:inputField value="{!oppRec.Strain1__c}" required="true" html-min="6" html-max="6" id="str1">
    <apex:actionSupport event="onchange" reRender="form" status="status"/>
</apex:inputField>
<apex:inputField value="{!oppRec.Strain2__c}" html-min="6" html-max="6"  id="str2">
    <apex:actionSupport event="onchange" reRender="form" status="status"/>
</apex:inputField>

I can still enter 4 digits and it still saves the record.

Also tried using the Javascript

<script type="text/javascript">
    function checkStr(){
        var str1=document.querySelector("[id$='str1']").value;
        var letters = /^[A-Za-z]+$/;
        if(str1.length!=6 || str1.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=""; 
        }
        var str2=document.querySelector("[id$='str2']").value;
        if(str2.length!=6 || str2.match(letters)){
            document.getElementById("err2").innerHTML="Number must be 6 digits long. OR Can not contain Letters.";
            event.preventDefault();
            return true;
        }else{
            document.getElementById("err2").innerHTML=""; 
        }
    }
    </script> 
    <apex:form >
        <div id="my-timeline" style="height:500px; border: 1px solid #aaa">
        <apex:pageBlock >
            <apex:pageMessages ></apex:pageMessages>
            <apex:pageBlockSection title="Strain Needed" columns="1">  
                   <apex:pageBlockSection >
                    <apex:inputField value="{!oppRec.Strain1__c}" required="true" html-oninput="checkStr();" id="str1">
                        <apex:actionSupport event="onchange" reRender="err1" status="status"/>
                    </apex:inputField>
                    <div id="err1"></div>
                    <apex:inputField value="{!oppRec.Strain2__c}" html-oninput="checkStr();" id="str2">
                        <apex:actionSupport event="onchange" reRender="err2" status="status"/>
                    </apex:inputField>
                    <div id="err2"></div>
      </apex:pageBlockSection>             
    </apex:pageBlock>
    <apex:commandButton value="Save" style="margin-left:500px;" action="{!finalUpdates}" rerender="form" onclick="checkStr();" oncomplete="RefreshPrimaryTab('{!Opportunity.id}'); return true;" />
    </div> 
</apex:form>

Here the issue is even though Strain2__c is not required it throws the validation error when it is not entered. How can I validate only when users enter data in the field. I also have an issue when I click the Save button it throws validation error next to the field and again after few seconds the save action is executed. How can I resolve the issues here. Any help is greatly appreciated, I am kind of stuck with this Validation.

3
  • min and max attribute are for quantity limits not length. min="4" means any number bigger or equals than 4. What you are looking for is probably maxlength and minlength. If you prefer to use min and max you should do min="100000" and max="999999" but this doesn't allow you to enter 012345. – Bartheleway Jan 20 at 17:08
  • Are you sure it's the save action executing, or is it the oncomplete="RefreshPrimaryTab('{!Opportunity.id}'); return true;" excuting? – eaeaoo Jan 20 at 17:39
  • @eaeaoo You are correct the oncomplete was executing. But can you please help How can I validate only when users enter data in the field... Users may be not fill in some fields, I need to validate them only when they enter in. Should I do it through Apex – user81642 Jan 20 at 17:55
0

Using the javascript -

function checkStr(){
        var str1=document.querySelector("[id$='str1']").value;
        var letters = /^[A-Za-z]+$/;
        if(str1.length!=6 || str1.match(letters)){
            document.getElementById("err1").innerHTML="Number must be 6 digits long. OR Can not contain Letters.";
            event.preventDefault();
        }else{
            document.getElementById("err1").innerHTML=""; 
        }
        var str2=document.querySelector("[id$='str2']").value;
        if(str2.length != 0 && (str2.length!=6 || str2.match(letters))){
            document.getElementById("err2").innerHTML="Number must be 6 digits long. OR Can not contain Letters.";
            event.preventDefault();
        }else{
            document.getElementById("err2").innerHTML=""; 
        }
    }

I've added an additional condition on the str2 check so that if the str is length 0 it doesn't fail validation. I've also removed the return true, which was potentially messing up the second condition.

Also, might be good to remove the oncomplete from the commandButton. You could reload the page by returning a pagereference from the apex method.

You can validate this using apex, or both js and apex. If the fields are required at the object level, the controller will return errors automatically if you attempt to save, or you can add custom messages to the page which should display in the <apex:pageMessages ></apex:pageMessages> section.

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.