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"}
}
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();
}
});
});
I have a registration form, in which I have used JavaScript form validator
My form
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="form-group" method="post" id="contact-form">
{% csrf_token %}
<input type"text" name="username" placeholder="userid" id="id_username"/>
<input type"email" name="email" placeholder="email" id="id_email"/>
<input type"password" name="password1" placeholder="password1" id="id_password1"/>
<input type"password" name="password2" placeholder="password2" id="id_password2"/>
<input type="address" name="address" placeholder="address" id="id_address"/>
<input type="submit"/>
</from>
JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('#contact-form').validate({
rules: {
username: {
minlength: 5,
required: true
},
email: {
required: true,
email: true
},
password1: {
minlength: 6,
required: true
},
password2: {
required: true,
minlength: 6,
equalTo: "#password1",
},
address: {
minlength: 5,
required: true,
},
},
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');
}
});
});
I want to RegEx pattern to address like only /-()., these charters are only allowed with alphabets
how do I use pattern RegEx in this?
try this
address: {
minlength: 5,
maxlenght=50,
required: true,
regex: /^[a-zA-Z0-9\s,'-./()]*$/,
},
I use jquery validate plugin.
One of my demand is to show the error message when the field lost it focus.
rules: {
firstName: {
required: true,
//minlength: 1,
maxlength: 30
},
lastName: {
required: true,
//minlength: 1,
maxlength: 30
}
},
messages: {
firstName: {
required: "Please enter your first name",
maxlength: "Please enter a value less than or equal to 30."
},
lastName: {
required: "Please enter your last name",
maxlength: "Please enter a value less than or equal to 30."
}
}
<div class="inline ui-grid-a">
<div class="firstInput ui-block-a">
<input type="text" class='signup-input first-name lettersOnly required' name="firstName" id="firstName" placeholder="" required value="${user?.firstname}">
</div>
<div class="secInput ui-block-b">
<input type="text" class='signup-input last-name lettersOnly required' name="lastName" id="lastName" placeholder="" required value="${user?.lastname}">
</div>
</div>
The maxlength for example works as expected , but the required start to work on focus out only if some validation happened before.
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 ..
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>