Validate only mandatory fields in jQuery validation plugin: below is my code
<label for="firstName">First Name<span class="required">*</span></label>
<input type="text" id="firstName" class="form-control" placeholder="First Name" name="firstName">
<label for="address1">Address Line 1</label>
<input type="text" id="address1" class="form-control" placeholder="Address Line 1" name="address1">
I want to skip address 1 on form submit
Try setting the required flag to false for address1.
$('#profileDetailsPage').validate({
rules: {
firstName:{
required: true,
textonly: true
},
address1:{
required: false, // don't require this field
textonly: true
}
},
messages: {
firstname: "Please enter your first name",
address1: "Please enter only text"
},
submitHandler: function() {}
});
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 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 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 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 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()