I'm creating a web application using Express and Jade. I want to validate a form using jQuery Validation. It does not give any errors, but when I insert wrong values in the form, it does not complain either. It just sends the data to the Express server.
This is my form:
form.form-horizontal(#signupForm, method='post', action='')
.form-group
label.col-sm-2.control-label(for='firstName')
| First Name:
.col-sm-10
input.form-control( #firstName,
type='text',
placeholder='John',
name='firstName')
.form-group
label.col-sm-2.control-label(for='lastName')
| Last Name:
.col-sm-10
input.form-control( #lastName,
type='text',
placeholder='Doe',
name='lastName')
.form-group
label.col-sm-2.control-label(for='password')
| Password:
.col-sm-10
input.form-control( #password,
type='password',
placeholder='Password (minimum 8 characters)',
name='password')
.form-group
label.col-sm-2.control-label(for='confirmPassword')
| Confirm Password:
.col-sm-10
input.form-control( #confirmPassword,
type='password')
.form-group
.col-sm-2.control-label
button.btn.btn-default(type='submit')
| Sign Up!
This is the rendered HTML:
<form #signupform="" method="post" action="" class="form-horizontal">
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input #firstname="" type="text" placeholder="John" name="firstName" class="form-control">
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input #lastname="" type="text" placeholder="Doe" name="lastName" class="form-control">
</div>
</div>
...
<div class="form-group">
<div class="col-sm-2 control-label">
<button type="submit" class="btn btn-default">Sign Up!</button>
</div>
</div>
</form>
This is my JavaScript file:
$(document).ready( function() {
$('#signupForm').validate({
rules: {
firstName: {
required: true
},
lastName: {
required: true
},
password: {
required: true,
minlength: 8
},
confirmPassword: {
required: true,
equalTo: '#password'
}
},
messages: {
firstName: {
required: 'This field is required!'
},
lastName: {
required: 'This field is required!'
},
password: {
required: 'This field is required!',
minlength: 'This password is too short!'
},
confirmPassword: {
required: 'This field is required!',
equalTo: 'This password is not the same!'
}
}
});
});
At a first glance, your id's should look like this:
"lastName": { required: 'This field is required'}
Edit
Seeing your html, your renderd input had a problem with the Id's.
<input #lastname=""
should be
<input id="lastname">
The same goes for your form id.
Edit
As mentioned below, the name attribute is used for validation targeting.
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 am trying basic client-side form validation using jQuery validation plugin.I have a basic sign up form, if I click on a button to create an account with all fields empty(just for testing), I am getting nice error messages as expected on all form fields except for only one field for inputting cellphone number. I have downloaded the code from the internet and this is the only field I have added.I am using Xampp, Things became even more strange after I moved all files to another computer and try to test the same validation, Guess what? it's no longer working as expected for all fields. This problem has been frying my brains, any help I will be grateful below is the code
HTML
<h2 class="form-signin-heading">Sign Up</h2><hr />
<div id="error">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Cellphone" name="user_cellphone" id="user_cellphone" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
<span class="glyphicon glyphicon-log-in"></span> Create Account
</button>
</div>
</form>
JS
$('document').ready(function()
{
/* validation */
$("#register-form").validate({
rules:
{
user_name: {
required: true,
minlength: 3
},
user_cellphone: {
required: true,
number: true
},
password: {
required: true,
minlength: 8,
maxlength: 15
},
cpassword: {
required: true,
equalTo: '#password'
},
user_email: {
required: true,
email: true
}
},
messages:
{
user_name: "Enter a Valid Username",
user_cellphone:{
required: "Provide a phone number",
number: "Phone Needs To Be a number"
},
password:{
required: "Provide a Password",
minlength: "Password Needs To Be Minimum of 8 Characters"
},
user_email: "Enter a Valid Email",
cpassword:{
required: "Retype Your Password",
equalTo: "Password Mismatch! Retype"
}
},
submitHandler: submitForm
});
/* validation */
/* form submit */
function submitForm()
{
var data = $("#register-form").serialize();
$.ajax({
type : 'POST',
url : 'register.php',
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> sending ...');
},
success : function(data)
{
if(data==1){
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Sorry email already taken !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> Create Account');
});
}
else if(data=="registered")
{
$("#btn-submit").html('Signing Up');
setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load("successreg.php"); }); ',5000);
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> '+data+' !</div>');
$("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> Create Account');
});
}
}
});
return false;
}
/* form submit */
Below is a snapshot of the form, I cant really figure out where is the problem.
You're declaring the number rule, but your corresponding message is assigned to the minlength rule...
rules: {
user_cellphone: {
required: true,
number: true
},
....
},
messages: {
user_cellphone: {
required: "Provide a phone number",
minlength: "Phone Needs To Be a number"
},
....
And document should not be in quotes...
$(document).ready(function() {...
Working DEMO: http://jsfiddle.net/bh5g0wfe/
Side note: You may want to read this too...
Dangerous implications of Allman style in JavaScript
I have a signup form, and I am using a 3rd party library to validate the inputs. This library provides very nice and cool effects for validation, but I need to do another verification to make sure the password and confirm password are matching. how can I do that via jQuery? Here is my code:
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group">
<label>Retype Password</label>
<input type="password" class="form-control" name="password2" />
</div>
and jQuery part:
$('#registrationForm').formValidation({
framework: 'bootstrap',
fields: {
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
},
password2: {
validators: {
notEmpty: {
message: 'Password conformation is required'
},
equalTo: {
field: 'password',
message: 'The password cannot be the same as username'
}
}
}
}
});
What should I put instead of the question marks, to address my issue? Or maybe I am completely wrong with the syntax?
Working Fiddle
Html :
<form id="formCheckPassword">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" id="password" />
</div>
<div class="form-group">
<label>Retype Password</label>
<input type="password" class="form-control" name="cfmPassword" id="cfmPassword" />
</div>
<input type="submit" value="submit" />
</form>
and Jquery Rules :
$("#formCheckPassword").validate({
rules: {
password: {
required: true,
minlength: 6,
maxlength: 10,
},
cfmPassword: {
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
messages: {
password: {
required: "the password is required"
}
}
});
Update as per request :
$('#RegistrationForm').formValidation({
framework: 'bootstrap',
fields: {
password: {
validators: {
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}
}
},
confirmPassword: {
validators: {
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
}
}
});
I don't see it working in that syntax. If you want to do it via jQuery (as you mentioned), you can simply check the values:
var password1 = $('input[name=password]').val();
var password2 = $('input[name=password2]').val();
var match = password1 == password2
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 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()