jQuery Form validation and submission issue

jQuery Form validation and submission issue - javascript

I have the following form that uses jQuery to validate a form and submit if all the fields are filled properly. Till now everything is working fine. But I want to add the following but not getting how to do so (as i am new to jQuery).
Text boxes (like first name & last name) should not accept any number.
How can I add these to my code? Please help.
Here is my code.
<?php
include'includes/db.php';
if(isset($_POST['submit']))
{
$fname =(!empty($_POST['firstname']))?$_POST['firstname']:null;
$lname =(!empty($_POST['lastname']))?$_POST['lastname']:null;
$email =(!empty($_POST['email']))?$_POST['email']:null;
$mobile =(!empty($_POST['mobile']))?$_POST['mobile']:null;
$dob =(!empty($_POST['dob']))?$_POST['dob']:null;
$location =(!empty($_POST['location']))?$_POST['location']:null;
$state =(!empty($_POST['state']))?$_POST['state']:null;
$gender =(!empty($_POST['gender']))?$_POST['gender']:null;
$str = "INSERT INTO members(mem_fname, mem_lname, mem_email, mem_mobile, mem_dob, mem_location, mem_state, mem_gender)VALUES('$fname', '$lname', '$email', '$mobile', '$dob', '$location', '$state', '$gender')";
$sql = mysql_query($str);
if($sql){
echo "Data Inserted Successfully";
}else{
echo "Data insertion failed";
}
}
?>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
mobile: {
required: true,
minlength: 10,
},
dob: "required",
location: "required",
state: "required",
gender: "required",
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
mobile: {
required: "Please provide your mobile number",
minlength: "Your mobile number must be 10 characters long"
},
email: "Please enter a valid email address",
dob: "Please provide you Date of Birth",
location: "Please provide your location",
state: "Please provide your state",
gender: "Please provide your gender",
agree: "Please accept our terms of service"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<br />
<br />
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div>
<input type="text" id="firstname" name="firstname" />
<br />
<div class="label">Last Name</div>
<input type="text" id="lastname" name="lastname" />
<br />
<div class="label">Email</div>
<input type="email" id="email" name="email" />
<br />
<div class="label">Mobile</div>
<input type="number" name="mobile" id="mobile" />
<br />
<div class="label">DOB</div>
<input type="text" name="dob" id="dob" class="datepicker"/>
<br />
<div class="label">Location</div>
<input type="text" name="location" id="location" />
<br />
<div class="label">State</div>
<input type="text" name="state" id="state" />
<br />
<div class="label">Gender</div>
<input type="radio" name="gender" id="gender" value="male" />
Male
<input type="radio" name="gender" id="gender" value="female" />
Female<br />
<div>
<br />
<input type="checkbox" name="agree" id="mobile" />
Do You accept our terms of service?<br />
<br />
<div>
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</body>
</html>

You can use the pattern rule from the additional-method.js file from jquery-validate
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
mobile: {
required: true,
minlength: 10,
pattern: /^[789]/
},
dob: "required",
location: "required",
state: "required",
gender: "required",
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
mobile: {
required: "Please provide your mobile number",
minlength: "Your mobile number must be 10 characters long",
pattern: 'should start with 7,8 or 9'
},
email: "Please enter a valid email address",
dob: "Please provide you Date of Birth",
location: "Please provide your location",
state: "Please provide your state",
gender: "Please provide your gender",
agree: "Please accept our terms of service"
},
submitHandler: function (form) {
form.submit();
}
});
Demo: Fiddle

You need to add new methods like this one:
jQuery.validator.addMethod("checkMobileNumberFirst", function(value, element) {
firstNumber = value.substring(0,1);
if (firstNumber <= 9 && firstNumber >=7 ){
return true;
}else{
return false;
}
}, "The Mobile phone number has to start with 7, 8 or 9");
and then add the new method in your validation:
mobile: {
required: true,
minlength: 10,
checkMobileNumberFirst: true
},

http://jqueryvalidation.org/ this link. it contains jquery validation plugin and demonstration ..

Related

New to HTML and jquery. Having trouble getting my error messages to show

I need some help with my JQUERY validation.
I can't seem to get it to show the error messages. I tried to apply the validation to the phone number, the email address, and the first name and last name. I've been at this for about 4 hours now and can't get the errors to show. I feel like i'm missing something really simple.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#info4all").validate({
rules: {
Name : {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
},
messages : {
Name: {
minlength: "Name should be at least 3 characters"
},
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
email: {
email: "The email should be in the format: abc#domain.tld"
}
}
});
})
</script>
<title>Contact US</title>
<link rel="stylesheet" type="text/css" href ="stylerules.css">
<meta charset=ntf-8">
</head>
<body>
<nav>
<center><table class= "menu">
<tr>
<td><button>Home</button></td>
<td><button>AboutUs</button></td>
<td><button>ContactUs</button></td>
<td><button>FAQ</button></td>
<td><button>Homepage</button></td>
</tr>
</center></table>
</nav>
<div id="container" class="centertext">
<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>
<nav>
</nav>
<div id ="left">
.
</div>
<div id="main">
<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>
.
</div>
</body>
<footer>
<p><center>Home</p>
Learn More About Us
Faqs
More Information
Welcome Page
</a></center></p>
<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>
<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>
<form id="info4all"First name & Last Name:<br>
<input type="text" name="Name"><br>
Phone Number:<br>
<input type="tel" name="PhoneNumber">
<br> Email address:<br>
<input type="Email" name="Email">
<br> Date:<br>
<br><input type="Date" name="Date"></br>
<br>When should we contact you?</br>
<input type="radio" name="Selection" value="Dates" checked> Morning<br>
<input type="radio" name="Selection" value="Dates"> Afternoon<br>
<input type="radio" name="Selection" value="Dates"> Weekend</br>
<br>What can we help you with?
<br />
<input type="checkbox" name="Information" value="Information" />Information
<br />
<input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
<br />
<input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
<br />
<input type="checkbox" name="Other" value="Other" />Other..
</br>
<br>Choose how you wish us to contact you</br><select>
<option value="Telephome">Landline</option>
<option value="Email">Email</option>
<option value="Call">Cell</option>
<option value="In Person">In Person</option>
</select>
</br>
<br><button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button></br>
</form>
<br></table>
</footer>
<html>

Please check your javascript parenthesis. It looks like you missed some. It should be like this-
$("#info4all").validate({
rules: {
Name: {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
},
messages: {
Name: {
minlength: "Name should be at least 3 characters"
},
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
email: {
email: "The email should be in the format: abc#domain.tld"
}
}
}
});
See couple of extra bracket before ending the script?
Check the JSFiddle too
https://jsfiddle.net/ashhaq12345/rbnztvx0/7/

this do the trick for me, your form was malformed, and you missed bracket in script
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#info4all").validate({
rules: {
Name : {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
}
},
messages : {
Name: "Name should be at least 3 characters",
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
Email: {
email: "The email should be in the format: abc#domain.tld"
}
}
})
})
</script>
<title>Contact US</title>
<link rel="stylesheet" type="text/css" href ="stylerules.css">
<meta charset="utf-8">
<meta name="keywords" content ="Contact Us, Staff">
<meta name="descrtiption" content="Looking to talk to us personally. Contact us Here.."'>
<meta name="author" content="Michael Cortez">
</head>
<body>
<nav>
<center><table class= "menu">
<tr>
<td><button>Home</button></td>
<td><button>AboutUs</button></td>
<td><button>ContactUs</button></td>
<td><button>FAQ</button></td>
<td><button>Homepage</button></td>
</tr>
</center></table>
</nav>
<div id="container" class="centertext">
<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>
<nav>
</nav>
<div id ="left">
.
</div>
<div id="main">
<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>
.
</div>
</body>
<footer>
<p><center>Home</p>
Learn More About Us
Faqs
More Information
Welcome Page
</a></center></p>
<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>
<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>
<form id="info4all" name="info4all">
First name & Last Name:<br>
<input type="text" name="Name" required /><br>
Phone Number:<br>
<input type="tel" name="PhoneNumber" required />
<br> Email address:<br>
<input type="email" name="Email" required />
<br> Date:<br>
<br><input type="Date" name="Date"></br>
<br>When should we contact you?</br>
<input type="radio" name="Selection" value="Dates" checked> Morning<br>
<input type="radio" name="Selection" value="Dates"> Afternoon<br>
<input type="radio" name="Selection" value="Dates"> Weekend</br>
<br>What can we help you with?
<br />
<input type="checkbox" name="Information" value="Information" />Information
<br />
<input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
<br />
<input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
<br />
<input type="checkbox" name="Other" value="Other" />Other..
</br>
<br>Choose how you wish us to contact you</br><select>
<option value="Telephome">Landline</option>
<option value="Email">Email</option>
<option value="Call">Cell</option>
<option value="In Person">In Person</option>
</select>
</br>
<br><button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button></br>
</form>
<br></table>
</footer>
<html>

Try this code i've fixed few bugs in HTML tags and corrected JQuery parenthesis. Also added error class to show red color on each error message in validation function.
$("#info4all").validate({
rules: {
Name : {
required: true,
minlength: 3
},
PhoneNumber: {
required: true,
number: true,
minlength: 9
},
Email: {
required: true,
email: true
}
},
messages : {
Name: {
minlength: "Name should be at least 3 characters"
},
PhoneNumber: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
minlength: "needs to be more numbers"
},
email: {
email: "The email should be in the format: abc#domain.tld"
}
},
errorClass: 'invalidField',
errorPlacement: function(error, element) {
error.css('color', 'red');
if(element.is(":radio"))
{
error.appendTo(element.parents('.container'));
}else{
error.insertAfter(element);
}
},
errorElement: "span",
submitHandler: function(form) {
}
});
});
Find the complete fixed code through the below link.
https://jsfiddle.net/RamshaS/2w85Lxnz/1/
BTW the form is working perfectly fine now!
Do not forget to add this and this jquery validation plugin at the end of html page.
Hope this answer helps you

Link jQuery file in html page in spring boot project

I want to link Jquery file with html page but it gives me an error (Uncaught SyntaxError: Unexpected token <)
the jQuery file is under static>js foler
and html is under templates folder
when I remove the #ComponentScan annotaion from main class it woks properly but spring boot doent create objects of classes defined class in contoller layer
this is my html page
<body>
<header>
<h1>Register Page</h1>
</header>
<span th:text="${message}"></span>
<form th:action="#{register}" id="registerForm" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" placeholder="Enter your first name"><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" placeholder="Enter your last name"><br>
<label for="email">User Email</label>
<input type="text" name="email" placeholder="Enter your email"><br>
<label for="province">Province</label>
<select name="province">
<option value="takhar">Takhar</option>
<option value="kunduz">Kunduz</option>
<option value="kabul">Kabul</option>
<option value="herat">Herat</option>
</select>
<label for="phoneNumber">Phone Number</label>
<input type="number" name="phoneNumber">
<button type="submit">register</button>
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script th:src="#{/js/validation.js}" type="text/javascript"></script>
and this is jquery file
$(document).ready(function(){
$("#registerForm").validate({
rules: {
firstName: "required",
lastName: "required",
email: {
required: true,
email :true
},
phoneNumber:{
required: true,
minlength: 10,
maxlength: 14
},
province: "required",
password:{
required: true,
minlength: 8
}
},
messages: {
fistName: "please enter your first Name",
lastName: "please enter your last name",
password: {
required: "please enter a password",
minlength: "you need to enter at least 10 charecters"
},
email: {
required: "please enter your email",
email: "email is not in a proper format"
},
phoneNumber: {
required: "please enter your phone",
minlength: "phone number should be atleast 10 digits",
mazlength: "phone number should not excede 14 digits"
},
province: "please enter your respective provicne"
},
formHandler : function(form){
form.submit();
}
});
});

Validation plugin files are not working

I am doing my form validation with jquery validation plugin. Everything seems fine but its not working. No message appears. Or may be its due to files that I have included.
files included
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
here is jquery
<script type="text/javascript">
$(function($){
$("#joinform").validate({
rules: {
firstname: {
required: true,
maxlength: 30
},
lastname: {
required: true,
maxlength: 30
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "#password"
}
},
messages: {
firstname: {
required: "Please enter your firstname",
maxlength: "Firstname is too large"
},
lastname: {
required: "Please enter your lastname",
maxlength: "Lastname is too large"
},
email: {
required: "Please enter email address",
email: "Please enter the valid email"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
repassword: {
required: "Please confirm your password",
equalTo:"Passwords should be same"
}
}
});
});
</script>
here is html.
<form role="form" name="joinform" id="joinform" action="" method="post">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" class="form-control" name="firstname" placeholder="First Name" required/>
<input type="text" class="form-control" name="lastname" placeholder="Last Name" required/>
<br/>
<label for="email">Email: </label>
<input type="email" class="form-control" name="email" placeholder="Enter email" required email/>
<br/>
<label for="pwd">Password: </label>
<input type="password" class="form-control" name="password" placeholder="at least 6 characters long" required/>
<label for="repass">Retype-Password:</label>
<input type="password" class="form-control" name="repassword" placeholder="Confirm your password" required/>
<br/>
Already a member?Login<br/>
<br/>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>

When using any jQuery plugin, you must load jQuery first. You are also including the plugin twice. You must not include each plugin more than once... preferably use the latest version.
This is correct...
<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.11.1/jquery.validate.js"></script>
Otherwise, use the latest plugin version supported by your version of jQuery...
<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.13.1/jquery.validate.js"></script>

I'm having trouble validating my form for some reason the error messages do not appear when the forename or surname is not enterd

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
}
});
});
</script>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" type="text" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" type="text" />
</p>
<input class="submit" type="submit" value="Submit"/>
</body>

Trailing commas (,) are illegal in JavaScript. When you do something like this:
rules: {
firstname: 'required',
lastname: 'required',
}
the JavaScript engine will think that }, is the next item in the rules object.
You need to do something like this:
rules: {
firstname: 'required',
lastname: 'required' // <-- no comma at end
}

bug in jquery validation

I have used the jquery form validation from this site http://jquery.bassistance.de/validate/demo/. In this site validation works when the field values are empty. I need it to work if i set values to the form fields for example the value for the email field is Email Address. How can i modify that?. The internal script that i have used is
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
This is my html
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

So my understanding from your question is that if they leave the field with the default value, e.g. "Email Address", you want that to error. You'll need to create your own custom validation method, using the addMethod function. Then you refer to that method in your options. I think something like this is the correct syntax:
$.validator.addMethod("checkdefault", function (value, element, params) {
if (params[0] == params[1] || params[0].length === 0) {
// user hasn't changed value from the default, or they've left it completely blank
return false;
} else {
return true;
}
});
email: {
// pass an array of params, first one is the field value, second is your default text
checkdefault: [$("#email").val(), 'Email Address'],
email: true
}

When you have set you values, call $("#signupForm").validate() if you set your values from javascript. If you do it with server side technology validate on document.Ready()

Develop Reference

JavaScript is the programming language of the Web.

jQuery Form validation and submission issue - javascript

http://jqueryvalidation.org/ this link. it contains jquery validation plugin and demonstration ..

Related

New to HTML and jquery. Having trouble getting my error messages to show

Link jQuery file in html page in spring boot project

Validation plugin files are not working

I'm having trouble validating my form for some reason the error messages do not appear when the forename or surname is not enterd

bug in jquery validation

Categories

Resources