I have 2 fields: Name Query and Date of Birth, while Name Query is mandatory and DoB isn't. I have the following form to show an validation message under the Name Query field:
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false
}
},
messages: {
NameQuery: "Please fill in name query field",
DoBQuery: ""
}
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery">
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery">
</div>
<input type="submit" value="Search">
</form>
Now I'd like to add some styling to the Name Query field validation message. Some code was added to the snippet, notice that the <div class="error__input"></div> has to EXIST IN BOTH FIELDS like in the snippet
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false
}
},
messages: {
NameQuery: "Please fill in name query field",
DoBQuery: ""
},
errorElement : 'div',
errorLabelContainer: '.error__input'
});
.error__input{
min-height: 20px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery">
<div class="error__input"></div>
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery">
<div class="error__input"></div>
</div>
<input type="submit" value="Search">
</form>
Now the validation message exists in both fields, I understand that jQuery-validate finds the error__input div and apply the class to it, but why does it add the message to the second field and how can I set the alert message to apply only on the first message while both <div class="error__input"></div> have to be there?
You want something like this, I guess:
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false
}
},
messages: {
NameQuery: "Please fill in name query field",
DoBQuery: ""
}
});
#myform .error {
display: block;
color: red;
}
#myform input {
display: inline;
}
#myform > div {
height: 50px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery" style="display: inline-block;">
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery" style="display: inline-block;">
</div>
<input type="submit" value="Search">
</form>
You could use errorPlacement to put your error message next to the error element.
errorPlacement: function(error,element){
error.appendTo(element.next(".error__input"));
}
var myForm = $("#myform").validate({
rules: {
NameQuery: "required",
DoBQuery: {
required: false /* if it is not required, why you put here? You can simply not insert this input field in validate()'s rules. */
}
},
messages: {
NameQuery: "Please fill in name query field"
},
errorElement : 'div',
errorPlacement: function(error,element){
error.appendTo(element.next(".error__input"));
}
});
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div>
<label for="NameQuery">Name</label>
<input type="text" id="NameQuery" name="NameQuery">
<div class="error__input"></div>
</div>
<div>
<label for="DoBQuery">Date of Birth</label>
<input type="text" id="DoBQuery" name="DoBQuery">
<div class="error__input"></div>
</div>
<input type="submit" value="Search">
</form>
you should remove <div class="error__input"></div> tag after Date of Birth field
Related
This question already has answers here:
jQuery Validation Plugin - adding rules that apply to multiple fields
(3 answers)
Closed 3 years ago.
What's the most concise way to match multiple keys to 1 value? e.g. in jQuery Validate I have something like:
$("#myform").validate({
rules: {
firstname: "required",
middlename: "required",
lastname: "required"
},
messages: {
firstname: "Please fill in first name",
middlename: "Please fill in middle name",
lastname: "Please fill in last name"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.js"></script>
<form id="myform">
<div>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname">
</div>
<div>
<label for="middlename">Middle Name</label>
<input type="text" id="middlename" name="middlename">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname">
</div>
<input type="submit" value="Search">
</form>
Which is fine, but I feel repeating firstname: "required", middlename: "required", lastname: "required" is not necessary, how can I have multiple keys matching same value maybe like this?
var names = {firstname, middlename, lastname};
$("#myform").validate({
rules: {
names: "required"
},
messages: {
firstname: "Please fill in first name",
middlename: "Please fill in middle name",
lastname: "Please fill in last name"
}
});
I know I can use a for loop, but I'm looking for the most concise way.
Came up with a solution myself using $.each(), it is basically matching different keys with the same value.
var rule = "required",
message = "Please fill in this field",
fields = ["firstname", "middlename", "lastname"],
rules = {},
messages = {};
// assign "required" to each key of fields
$.each(fields, function (index, value) {
rules[value] = rule;
messages[value] = message;
});
$("#myform").validate({
rules: rules,
messages: messages
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.js"></script>
<form id="myform">
<div>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname">
</div>
<div>
<label for="middlename">Middle Name</label>
<input type="text" id="middlename" name="middlename">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname">
</div>
<input type="submit" value="Search">
</form>
This question already exists:
jQuery show/hide form with jQuery validate plugin working on last shown div only
Closed 4 years ago.
I am trying to validate my form that is a jQuery show/hide form. jQuery validate plugin only validates my last input on the last div (input type file). I can currently upload an image and submit the form successfully with the remaining inputs empty.
Below is the third div and when i click post ad with no inputs filled in, "This field is required" is shown.
Below is the first div with no validation messages
Below is the second div with no validation messages
Here is my form:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zootopia</title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
</head>
<body>
<form id="ad_form" method="post">
<div id="ad_form_section1">
<div class="form-group">
<label for="ad_title">Ad Title</label>
<input type="text" class="form-control stored" id="ad_title" placeholder="e.g. German Sheperd puppy - 4 months old" name="ad_title" required>
</div>
<div class="form-group">
<label for="description">Describe what you're offering</label>
<textarea class="form-control stored" id="description" rows="6" placeholder="e.g. Owner supervised visits, minimum 1hr bookings, play with my german sheperd puppy in my backyard" name="description" required></textarea>
</div>
<button type="button" id="ad_section2" class="btn btn-primary"> Next </button>
</div>
<div id="ad_form_section2">
<div class="form-group">
<label for="location"> Location</label>
<input type="text" id="location_ad" class="form-control stored" placeholder="location" name="location" required/>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" id="price" class="form-control stored" name="price" placeholder="$0.00" required/>
</div>
<button type="button" id="back_section1" class="btn btn-primary"> Back </button>
<button type="button" id="ad_section3" class="btn btn-primary"> Next </button>
</div>
<div id="ad_form_section3">
<div>
<label> Select pet pictures</label>
<input type="file" name="multiple_files[]" id="multiple_files" multiple required/>
</div>
<button type="button" id="back_section2" class="btn btn-primary"> Back </button>
<input type="hidden" name="action_type" value="add" />
<input type="submit" id="ad_button" class="btn btn-primary" value="Post ad" />
</div>
</form>
Here is my JavaScript:
$(document).ready(function(){
$("#ad_section2").click(function(){
$("#ad_form_section1").hide();
$("#ad_form_section2").show();
});
$("#back_section1").click(function(){
$("#ad_form_section1").show();
$("#ad_form_section2").hide();
});
$("#ad_section3").click(function(){
$("#ad_form_section3").show();
$("#ad_form_section2").hide();
});
$("#back_section2").click(function(){
$("#ad_form_section2").show();
$("#ad_form_section3").hide();
});
$("#ad_form").validate({
rules:{
ad_title:{
required: true
},
description:{
required: true
},
location:{
required: true
}
},
messages:{
ad_title: {
required: "please enter an ad title"
},
description: {
required: "please enter a description"
},
location: {
required: "please enter a location"
}
},
submitHandler: function(form) {
var petID = $( "#pet_ad option:selected" ).val();
var addAdUrl = "../../controller/post_ad_process.php?petID=" + petID;
$(form).ajaxSubmit({
url:addAdUrl,
type:"post",
datatype: 'json',
success: function(result){
if(result.petAd == false){
alert("Pet ad already exists!");
}else{
alert("Ad posted!");
$('#image_table').hide();
}
},
error: function(error) {
alert("Error");
}
});
}
});
})
Here is my CSS:
#ad_form_section2,
#ad_form_section3{
display: none;
}
You need to add a condition before you show/hide next fields
if ( $('field-id').valid() ) {
// Code
}
For example:
$("#ad_section2").click(function(){
if ($('#ad_title').valid() && $('#description').valid()) {
$("#ad_form_section1").hide();
$("#ad_form_section2").show();
}
});
Also, don't forget to set character encoding to avoid characters range error, Add the following code just below <head> tag:
<meta charset="UTF-8">
Form Example:
$(document).ready(function(){
$("#ad_form").validate({
rules:{
ad_title:{
required: true,
minlength: 3, // set minimum title length
},
description:{
required: true,
minlength: 10,
},
location:{
required: true
}
},
messages:{
ad_title: {
required: "please enter an ad title",
minlength: "Your title must be more than 3 characters!",
},
description: {
required: "please enter a description",
minlength: "Your description must be at least 10 characters long",
},
location: {
required: "please enter a location"
}
},
submitHandler: function(form) {
var petID = $( "#pet_ad option:selected" ).val();
var addAdUrl = "../../controller/post_ad_process.php?petID=" + petID;
$(form).ajaxSubmit({
url:addAdUrl,
type:"post",
datatype: 'json',
success: function(result){
if(result.petAd == false){
alert("Pet ad already exists!");
}else{
alert("Ad posted!");
$('#image_table').hide();
}
},
error: function(error) {
alert("Error");
}
});
}
});
$("#ad_section2").click(function(){
// Check if valid before show/hide
if ($('#ad_title').valid() && $('#description').valid()) {
$("#ad_form_section1").hide();
$("#ad_form_section2").show();
}
});
$("#back_section1").click(function(){
$("#ad_form_section1").show();
$("#ad_form_section2").hide();
});
$("#ad_section3").click(function(){
// Check if valid before show/hide
if ($('#location_ad').valid()) {
$("#ad_form_section3").show();
$("#ad_form_section2").hide();
}
});
$("#back_section2").click(function(){
$("#ad_form_section2").show();
$("#ad_form_section3").hide();
});
});
#ad_form_section2,
#ad_form_section3 {
display: none;
}
label.error {
color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="container">
<form id="ad_form" method="post">
<div id="ad_form_section1">
<div class="form-group">
<label for="ad_title">Ad Title</label>
<input type="text" class="form-control stored" id="ad_title" placeholder="e.g. German Sheperd puppy - 4 months old" name="ad_title">
</div>
<div class="form-group">
<label for="description">Describe what you're offering</label>
<textarea class="form-control stored" id="description" rows="6" placeholder="e.g. Owner supervised visits, minimum 1hr bookings, play with my german sheperd puppy in my backyard" name="description" required></textarea>
</div>
<button type="button" id="ad_section2" class="btn btn-primary"> Next </button>
</div>
<div id="ad_form_section2">
<div class="form-group">
<label for="location"> Location</label>
<input type="text" id="location_ad" class="form-control stored" placeholder="location" name="location" required/>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" id="price" class="form-control stored" name="price" placeholder="$0.00" required/>
</div>
<button type="button" id="back_section1" class="btn btn-primary"> Back </button>
<button type="button" id="ad_section3" class="btn btn-primary"> Next </button>
</div>
<div id="ad_form_section3">
<div>
<label> Select pet pictures</label>
<input type="file" name="multiple_files[]" id="multiple_files" multiple required/>
</div>
<button type="button" id="back_section2" class="btn btn-primary"> Back </button>
<input type="hidden" name="action_type" value="add" />
<input type="submit" id="ad_button" class="btn btn-primary" value="Post ad" />
</div>
</form>
</div>
More examples from documentation
By default the plugin is going to ignore any/all fields that are hidden. You have to set to the ignore option to "nothing".
$("#ad_form").validate({
ignore: [], // ignore nothing, validate everything
rules:{
ad_title:{ ....
If you're expecting validation when you show/hide sections of the form, that's not how it works. You're going to have to programmatically trigger validation on the relevant fields as you click back and forth. Use the .valid() method for this.
However, multi-step validation can quickly get tedious so you may have to re-think your entire approach. I personally like to enclose each section within its own set of <form></form> tags so I can control validation on each step separately.
Here's one example:
https://stackoverflow.com/a/20481497/594235
I have created forms using php and using jquery for validation.What i exactly need is if validation successful on submit button, disable the submit button till submission gets over.Here is my code:
if(document.location.pathname == "/contact-us"){
$("#form-contact-user").validate({
ignore: [],
rules: {
name:{
required: true
},email: {
email: true
},
phne: {
phnDash: true
},
zip: {
zipcode: true
}
},
errorPlacement: function(error, element) {
if (element.attr("type") == "checkbox") {
error.appendTo( element.parent().parent().parent(".form-checkboxes"));
}
else if (element.attr("name") == "mailing_address")
{
error.appendTo(element.parent().parent().parent());
}
else{
error.insertAfter(element);
}
}
});
Try this:
$('#btnId').attr('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="btnId" value="Submit">
I hope this is what you are looking for,
$('#submitBtn').click(function(event) {
//event.preventDefault();
$(this).attr('disabled', true);
//Perform Validation
//if(valid) {
// $("#form-contact-user").submit();
//}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="submitBtn" value="Submit">
According to the documentation you can use:
submitHandler (default: native form submit):
Callback for handling the actual submit when the form is valid.
ANSWER UPDATED
From your comment:
Getting the following error:-Uncaught TypeError: Cannot read property 'call' of undefined
This message depends on your rules. Because I don't know anything about your
html I can also assume a possible structure in the following snippet:
$("#form-contact-user").validate({
debug: true,
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true
},
phone: {
required: true
},
zip: {
required: true
}
},
errorPlacement: function (error, element) {
if (element.attr("type") == "checkbox") {
error.appendTo(element.parent().parent().parent(".form-checkboxes"));
}
else if (element.attr("name") == "mailing_address") {
error.appendTo(element.parent().parent().parent());
}
else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
// do other things for a valid form
$(form).find(':submit').prop('disabled', true);
setTimeout(function() {
form.submit();
}, 1000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<form id="form-contact-user" method="get" action="">
<fieldset>
<legend>Please provide your name, email address, phone number and zipcode</legend>
<p>
<label for="name">Name (required, at least 2 characters)</label>
<input id="name" name="name" type="text">
</p>
<p>
<label for="email">E-Mail (required)</label>
<input id="email" type="email" name="email">
</p>
<p>
<label for="phone">Phone Number (required)</label>
<input id="phone" type="text" name="phone">
</p>
<p>
<label for="zip">Zip code (required)</label>
<textarea id="zip" name="zip"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
I have created page in which I am having a language selection drop-down, upon selection a language, then the validation of the fields should be in that specific language. Lets say I am selecting Arabic, then validation should be in Arabic. I am using jQuery-Form-Validator plugin,but don't know how to switch the language based validation.
my code is as given below
JSFiddle
Html
Select Language:<select>
<option value="english">English</option>
<option value="arabic">Arabic</option>
</select>
<form action="" id="myForm">
<p>
Name:<input name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
</p>
<p>
Email:<input type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Can anyone please tell me some solution for this
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Language" charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="formValidator.js"></script>
<style>
.add{
}
</style>
</head>
<body>
See errors in your language :
<select id="lang" >
<option value="en">English</option>
<option value="ar">Arabic</option>
<option value="mr">Marathi</option>
<option value="hi">Hindi</option>
<!-- add more language option -->
</select>
<form action="" id="myForm">
<p>
Name:<input id="name" name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
</p>
<p>
Email:<input id="email" type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<script>
var validations = {
"en" : {
"name" : "Maximum Length is 5",
"email" : "Invalid Email"
},
"ar" : {
"name" : "أقصى طول هو 5",
"email" : "بريد إلكتروني خاطئ"
},
"mr" : {
"name" : "कमाल लांबी 5",
"email" : "अवैध ईमेल"
},
"hi" : {
"name" : "अधिकतम लंबाई 5",
"email" : "अवैध ईमेल"
}
//add more errors in your language
};
$("#lang").on('change', function(){
var currLang = $('#lang option:selected').attr('value');
$("#name").attr('data-validation-error-msg',validations[currLang].name);
$("#email").attr('data-validation-error-msg',validations[currLang].email);
});
$.validate({
});
</script>
</body>
</html>
Here is my original suggestion, fixed - please note I added ID to the user and email
var msg = {
"ar": {
invalidEmail: 'بريد إلكتروني خاطئ',
maxLength: 'أقصى طول هو 5'
},
"en": {
invalidEmail: 'Invalid Email',
maxLength: 'Maximum Length is 5'
}
}
$(function () {
$.validate({});
$("#lang").on("change", function () {
var msgs = msg[this.value];
// NOTE using .data does NOT work!
$("#user").attr("data-validation-error-msg", msgs.maxLength);
$("#email").attr("data-validation-error-msg", msgs.invalidEmail);
}).change();
});
.error {
color:red;
}
.input-validation-error {
border:1px solid red;
}
h1 {
font-weight:bold;
}
#debug {
font-size:small;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>
Select Language:
<select id="lang">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>
<form action="" id="myForm">
<p>Name:
<input id="user" name="user" data-validation="length" data-validation-length="min5" />
</p>
<p>Email:
<input id="email" name="email" type="text" data-validation="email" />
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Here another suggestion - please note I am using this plugin: http://jqueryvalidation.org/
var msg = {
ar: {
invalidEmail: 'بريد إلكتروني خاطئ',
maxLength: 'أقصى طول هو 5'
},
en: {
invalidEmail: 'Invalid Email',
maxLength: 'Maximum Length is 5'
}
}
$(function () {
$("#myForm").validate({
user: {
required: true,
length: 5
},
email: {
required: true,
email:true
}
});
$("#lang").on("change", function () {
var lang = this.value;
$("#user").rules("add", {
messages: {
required: msg[lang].maxLength,
length: msg[lang].maxLength
}
});
$("#email").rules("add", {
messages: {
required: msg[lang].invalidEmail,
email: msg[lang].invalidEmail
}
});
}).change();
});
.error {
color:red;
}
.input-validation-error {
border:1px solid red;
}
h1 {
font-weight:bold;
}
#debug {
font-size:small;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
Select Language:
<select id="lang">
<option value="en">English</option>
<option value="ar" selected>Arabic</option>
</select>
<form action="" id="myForm">
<p>Name:
<input id="user" name="user" class="required" />
</p>
<p>Email:
<input name="email" id="email" class="required" type="text"/>
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
$("select").on("change", function() {
$("#name-input").data("validation-error-msg", errorMsgInDiffLang);
});
Have you gone through this post on StackOverflow here this solution would make your life easier
I have a very typical example of jQuery validation form but it doesn't seem to work.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and 13 or larger.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<h3>Contact Form</h3>
<form method="POST" class="form-horizontal" id="contact-form" action="">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name" size="50">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address" size="50">
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" cols="52" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="control-group">
<?php
$var1 = rand(1,20);
$var2 = rand(1,20);
$sum = $var1 + $var2;
?>
<label class="control-label" for="captcha">Please enter the result of <?php echo $var1.' + '.$var2.' ='; ?>
</label>
<input type="text" id="captcha" name="captcha"><br/>
</div>
<br/>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" name="contact-submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#contact-form").validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
captcha: {
required: true,
min: <?php echo $sum; ?>,
max: <?php echo $sum; ?>
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
});
jQuery.extend(jQuery.validator.messages, {
min: jQuery.validator.format("Wrong answer."),
max: jQuery.validator.format("Wrong answer.")
});
});
});
</script>
The only one thing needs to pay attention is my simple captcha. I use 2 php variables and its sum to check whether a spammer try to contact.
When I click on Submit button, the browser just refresh and nothing else happen, no error was generated. However, clicking Cancel button allow me to reset the form.
I have already searched for existing question relating to why jQuery validation did not work but can not figure out my case. Please help me to solve it. Any help is appreciated. Thank you in advance.
Based on suggestion from #Juhana, I worked around with my code and found another way to make my code work. I just replaced:
jQuery.extend(jQuery.validator.messages, {
min: jQuery.validator.format("Wrong answer."),
max: jQuery.validator.format("Wrong answer.")
by
messages: {
captcha: {
min: "Wrong answer",
max: "Wrong answer"
}
}
Thank you for your help.
You're breaking it because you've placed jQuery.extend() inside of the .validate() method; and you've improperly included a closing parenthesis and semicolon where there can only be a comma.
$("#contact-form").validate({
// options...
....,
success: function (element) {
....
}); // <- ');' is not valid here. Options must be separated by commas
jQuery.extend(jQuery.validator.messages, { // <- this is not a valid option!
min: jQuery.validator.format("Wrong answer."),
max: jQuery.validator.format("Wrong answer.")
});
});
Only the options provided by the developer can go inside of the .validate() method.
$("#contact-form").validate({
// options...
....,
success: function (element) {
....
}, // <- options must be separated by commas
messages: { // <- valid option
captcha: {
min: "Wrong answer",
max: "Wrong answer"
}
}
});