0

I am using jquery to do custom field validation. Test_Name__c in the below code is a required standard field. When i am submitting the form i am getting the standard field validation error as "You must Enter a value". My custom validation is not showing up.

Can anyone tell what is the issue.

<apex:page  standardStylesheets="false" controller="test" sidebar="false">
    <head>
  <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
  <apex:includescript value="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" />

  <script type="text/javascript">
$(document).ready(function() {

$('[id$=mainID]').validate();

$('[id$=testid]').rules("add",{
                required: true
            });

}); 
jQuery.validator.messages.required = "You better have entered a value.. or else!";

</script>
    </head>

    <div style="background-color: #7dbed2;" class="panel panel-primary">
        <br />
        <apex:form style="background: #f4f7f8;border-radius: 8px; width:65%; padding: 20px; margin:auto;" id="mainID">
            <div class="panel panel-primary">
                <div class="panel-body">                  
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group" id="div1">
                                <apex:inputField value="{!test.Test_Name__c}" label="Name" id="testid" styleClass="form-control" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                    </div>
                </div>
                <div>
                    <br />
                    <div class="row">
                        <div class="col-md-6">
                            <apex:commandButton value="Save" style="width: 100%;height: 41px;" styleClass="" reRender="mainID"/>
                        </div>
                    </div>
                </div>
            </div>

            <br/>
        </apex:form>        
    </div>
</apex:page>
Improve this question
0

Your form is being refreshed after the submit.

  1. Check console for any error messages
  2. Try changing the commandButton to add a rerender="". Or rerender a different element that does not include the input...
Improve this answer
0

The module you're using appears to depend on the form's onsubmit event. This won't work when you use reRender, because Visualforce converts the form submit into an AJAX form submission. You have at least several ways you can fix this.

Don't ReRender

If you simply remove reRender entirely, your code should work as expected. Your module depends on an actual form submit, so that's what you have to give it.

Use apex:commandButton onClick

You can use the onclick function to prevent the submission; just return a false value. Note that this means additional work will be needed on your script.

Use Native Visualforce

Including an entire library just to validate a text box is overkill; in this simple example, it should be sufficient to just let Visualforce do what it does, since it'll tell the user for you, just not with your custom message, which is a bit threatening, if you ask me.

Use VanillaJS

Considering that it's only about 4 lines of code to do validation in plain JS without needing to download 100kb files just for a single function, you could also choose to just code this in as a simple function called from onClick (above).

Improve this answer

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.