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>
Related
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();
}
});
});
First, I have a script for validation, its working fine and if I added a script for the alert box, validation function is not working. What I need is first, the validator should execute and after that, the alert for the button should execute.
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
}
});
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("Hello World!");
});
});
</script>
Use submitHandler:
$("#ContactForm1").validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
},
submitHandler: function() {
alert("Hello World!");
}
});
Here is working example.
To check if your form is valid simply use:
if ($( "#ContactForm1" ).valid())
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
},
submitHandler: function() {
//$('#btn').click();
}}
);
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready(function(){
$("#btn").click(function(){
if ($( "#ContactForm1" ).valid()) {
alert('runs only if form is valid');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form id="ContactForm1" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="fname">Name (required, at least 2 characters)</label>
<input id="cname" name="fname" minlength="2" type="text" required>
</p>
<p>
<label for="email">E-Mail (required)</label>
<input id="email" type="email" name="email" required>
</p>
<p>
<label for="phone">Phone (optional)</label>
<input id="phone" type="phone" name="phone">
</p>
<p>
<label for="phone">URL (optional)</label>
<input id="phone" type="phone" name="phone">
</p>
<p>
<label for="message">Your message (required)</label>
<textarea id="message" name="message" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
<p>
<button type="button" id="btn">Your button</button>
</p>
</fieldset>
</form>
I am very new to Jquery and hope you guys can help me with this jquery validation problem.
Been trying to validate the form but it does not validate at all. It accepts anything that I type in the field, regardless of what restrictions I set.
Please help. Thank you.
Here is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$('#form').validate({
alert("bbbb");
rules: {
name: {
required: true,
minlength: 2,
maxlength: 20,
lettersonly: true
},
ssn: {
required: true,
minlength: 9,
maxlength: 9,
nowhitespace: true
},
gender: {
required: true
},
mobile: {
required: true,
minlength: 10,
maxlength: 13,
digits: true
},
address: {
required: true,
minlength: 10,
},
email: {
required: true,
minlength: 6,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name should be more than 2 characters",
maxlength: "Name should be less than 20 characters",
lettersonly: "Name should contain only letters"
},
ssn: {
required: "Please enter your NRIC",
minlength: "NRIC should be more than 9 characters",
maxlength: "NRIC should be less than 9 characters",
nowhitespace: "NRIC should not have any spaces"
},
gender: {
required: "Please select your gender",
},
mobile: {
required: "Please enter your mobile number",
minlength: "Mobile number should be more than 10 characters",
maxlength: "Mobile number should be less than 13 characters",
digits: "Mobile number should contain only digits"
},
address: {
required: "Please enter your address",
minlength: "Address should be more than 10 characters",
},
email: {
required: "Please enter your email address",
minlength: "Password should be more than 6 characters",
email: "Please enter a valid email address"
}
},
});
$("#submit").click(function(){
$("#form").submit();
return false;
});
});
</script>
<div id="form">
<center>
<form id="form">
<div class="col-xs-12">
<input type="text" name="name" id="name" placeholder="Name" required />
</div>
<div class="col-xs-12">
<input type="text" name="nric" id="nric" placeholder="NRIC" required />
</div>
<div class="col-xs-12">
<select class="dropdown" id="gender" onChange="changeColor(this)">
<option value="" disabled selected>Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<div class="col-xs-12">
<input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
</div>
<div class="col-xs-12">
<input type="text" name="address" id="address" placeholder="Address" required />
</div>
<div class="col-xs-12">
<input type="email" name="email" id="email" placeholder="Email" required />
</div>
<input id="submit" class="button" type="submit" value="submit"/>
</form>
</center>
</div>
You have 2 elements with the id="form", so the validator is assigned to the div not to the form.
Change the id value of the div to something else.
Also the additional-methods.js file must be added after query.validate.js and there is a syntax error because of the alert() within the validate so
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<div>
<center>
<form id="form">
<div class="col-xs-12">
<input type="text" name="name" id="name" placeholder="Name" required />
</div>
<div class="col-xs-12">
<input type="text" name="nric" id="nric" placeholder="NRIC" required />
</div>
<div class="col-xs-12">
<select class="dropdown" id="gender" onChange="changeColor(this)">
<option value="" disabled selected>Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<div class="col-xs-12">
<input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
</div>
<div class="col-xs-12">
<input type="text" name="address" id="address" placeholder="Address" required />
</div>
<div class="col-xs-12">
<input type="email" name="email" id="email" placeholder="Email" required />
</div>
<input id="submit" class="button" type="submit" value="submit"/>
</form>
</center>
</div>
then
jQuery(function ($) {
$('#form').validate({
rules: {
name: {
required: true,
minlength: 2,
maxlength: 20,
lettersonly: true
},
ssn: {
required: true,
minlength: 9,
maxlength: 9,
nowhitespace: true
},
gender: {
required: true
},
mobile: {
required: true,
minlength: 10,
maxlength: 13,
digits: true
},
address: {
required: true,
minlength: 10,
},
email: {
required: true,
minlength: 6,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name should be more than 2 characters",
maxlength: "Name should be less than 20 characters",
lettersonly: "Name should contain only letters"
},
ssn: {
required: "Please enter your NRIC",
minlength: "NRIC should be more than 9 characters",
maxlength: "NRIC should be less than 9 characters",
nowhitespace: "NRIC should not have any spaces"
},
gender: {
required: "Please select your gender",
},
mobile: {
required: "Please enter your mobile number",
minlength: "Mobile number should be more than 10 characters",
maxlength: "Mobile number should be less than 13 characters",
digits: "Mobile number should contain only digits"
},
address: {
required: "Please enter your address",
minlength: "Address should be more than 10 characters",
},
email: {
required: "Please enter your email address",
minlength: "Password should be more than 6 characters",
email: "Please enter a valid email address"
}
},
});
});
Demo: Fiddle
Hey you need to create custom rule in the library
like this
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}
and then have use it like this
rules: {
gender: {valueNotEquals: "default"}
},
messages: {
gender: { valueNotEquals: "Please select a payment method"}
}
I am trying to call JavaScript function while submitting the form.
Here is code but while submitting function not called, please suggest something and I want to show error messages using javascript method as well , how can I show error messages in validation using JavaScript.
<form id="register" name="register" onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
},
"email": {
required: true,
}
}
});
});
</script>
and here is JavaScript code
function validateForm()
{
var password = document.forms["register"]["Password"].value;
var con-password = document.forms["register"]["Confirm-Password"].value;
if(password != con-password)
{
document.getElementById('password-error').style.visibility='visible';
alert("not matched");
}
alert("matched");
}
This is probably due to a syntax error in your script. When you see errors like that, look into the JavaScript console of your browser.
In this case, con-password is not a valid variable name. What JavaScript sees is:
var con - password ...
i.e. the code says "substract password from con". Try an underscore instead:
var con_password ...
Do not need to do anything extra for password matching, just add equalTo: "#Password" to it as shown in the below example:
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm-Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
// Your function call
return false; // return true will submit form
}
});
});
Working example:
<form id="register" name="register" action="" method="post">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm_Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm_Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
// Your function call
return false; // return true will submit form
}
});
});
</script>
Maybe instead of checking if passwords matches you can add new rule in validation?
something like:
... "Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"} ....
and for messages add:
... messages: {
"Password": "Your message",
}...
and all in all something like this: `
$(document).ready(function () {
$("Your form name").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
email: true
}
}
messages: {
"Password": "Your message",
"email": "Your Message",
},
submitHandler: function (form) {
form.submit();
}
});
});`
try this. i add onclick event on the submit button to call the function validateForm()
html
<form id="register" name="register">
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" onclick="validateForm()">Submit</button>
</form>
this is the validateForm()
<script type="text/javascript">
function validateForm() {
var username = $('#Username'),
password = $('#Password'),
confirm = $('#Confirm-Password'),
email = $('#email');
$('#register').submit(function(ev){
// check if all fields is not empty
if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') {
ev.preventDefault(); // prevent form submit
alert('All fields are required.'); //alert message
//check if password and confirm password is equal
} else if(password.val() != confirm.val()){
ev.preventDefault(); // prevent form submit
alert('password did not match.'); //alert message
} else {
return true; // submit form if validation has passed.
}
});
}
</script>
May be you missed - you need to use method="post" in
http://jsfiddle.net/dLbLS/
<form id="register" name="register" method="post" onsubmit="validateForm();" >
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" >Submit</button>
</form>
Use this code
<input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'">
do one thing i am sending one link please go through that link i have commented my code over there copy and paste it and test it....
How to do validation in JQuery dialog box?
if this answer is correct then please mark it as answer for others....
I am using jquery for form validation. Rest is well except the confirm password field. Even when the same password is typed, the Please enter the same password. is not removed.
My script is:
<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules: {
password: {
required: true, minlength: 5
},
c_password: {
required: true, equalTo: "#password", minlength: 5
},
email: {
required: true, email: true
},
phone: {
required: true, number: true, minlength: 7
},
url: {
url: true
},
description: {
required: true
},
gender: {
required: true
}
},
messages: {
description: "Please enter a short description.",
gender: "Please select your gender."
}
});
});
-->
</script>
And inside the form tag:
<div class="form-row"><span class="label">Password</span><input type="password" name="password" class="required" id="password" /></div>
<div class="form-row"><span class="label">Confirm Password</span><input type="password" name="c_password" id="c_password" /></div>
Any suggestion?
Would be much thankful for the help.
Your fields doesn't have the ID property.
In jQuery the "#password" selector means "the object that has an id property with value 'password'"
Your code should look like this:
<input type="password" name="password" id="password" class="required"/>
<input type="password" id="password" class="nomal required error" value="" name="cpassword">
<input type="password" equalto="#password" class="nomal required error" value="" name="cpassword">
Be sure that your password's input text has id 'password'
rules: {
isn't closed. Put another } after:
messages: {
description: "Please enter a short description.",
gender: "Please select yor gender."
}
This is as well as the answer about the element ID's.
Be sure that no other input with tag id='password' in that same page.
I came across some issues when using camelCase id's for the password inputs. I finnally got it working with different 'name' and 'id'.
<input type="password" id="pass" placeholder="New password" name="newPassword">
<input type="password" id="pass2" placeholder="New password" name="repeatNewPassword">
<input type="email" id="inputNewEmail" name="newEmail" placeholder="New email">
<input type="email" id="repeatNewEmail" name="repeatNewEmail" placeholder="New email>
Then in the JS:
rules: {
newPassword: {
minlength: 6
},
repeatNewPassword: {
minlength: 6,
equalTo: "#pass"
},
newEmail: { email: true},
repeatNewEmail: {email: true, equalTo: '#inputNewEmail'},
}
So refer to the input field by its 'name' but define equalTo deppendency using 'id'. I'm not sure about the camelCase issue, for the email inputs it worked, but exactly same nomenclature with password inputs didn't work, according to my experience
if($("#newpassword").val()!== ($("#conformpassword").val())){
$('#newpasswordId').html('<font color="red">Your password does not match</font>');
$("#newpassword").val('');
$("#conformpassword").val('');
$('#newpassword').css("border", "#FF0000 solid 1px")
$('#conformpassword').css("border", "#FF0000 solid 1px")
$("#newpassword").focus();
return false;
}