jQuery validation doesn't work on first attempt - javascript

I have a problem, my validation start work only after click button, when i input data first time , i don't have error messages, Rest server don't save invalid data, on next input data, validator writes an error's. My code
$(document).ready(function() {
$("#register-form").validate({
rules: {
login: {
required: true,
minlength: 3,
maxlength: 15,
regexp: '^[a-zA-Z0-9_-]+$'
},
password: {
required: true,
minlength: 3,
maxlength: 15,
},
firstName: {
required: true,
minlength: 2,
maxlength: 15,
},
lastName: {
required: true,
minlength: 2,
maxlength: 15,
},
email: {
required: true,
email: true
},
birthDate: {
required: true,
regexp: '^((19|20)\\d\\d)-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$',
}
},
messages: {
login: {
required: "This field cannot be null",
minlength: "Login at least 3 symbols",
maxlength: "Name maximum 15 symbols",
regexp: 'Login can consist of letters, numbers, underscores(_),hyphens(-) !'
},
password: {
required: "This field cannot be null",
minlength: "Password at least 3 symbols",
maxlength: "Password maximum 15 symbols",
},
firstName: {
required: "This field cannot be null",
minlength: "Name at least 2 symbols",
maxlength: "Name maximum 15 symbols",
},
lastName: {
required: "This field cannot be null",
minlength: "Surname at least 2 symbols",
maxlength: "Surname maximum 15 symbols",
},
email: "Please enter a valid email address",
birthDate: {
required: "This field cannot be null",
regexp: "Please input date in format YYYY-MM-DD",
}
}
});
jQuery.validator.addMethod(
'regexp',
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<form action="" id="register-form">
<div class="form-left-col">
<label>Login:</label>
<input type="text" id="login" name="login" value="" required />
<label>Password:</label>
<input type="text" id="password" name="password" value="" required/>
<label>First Name:</label>
<input type="text" id="firstName" name="firstName" value="" required/>
<label>Last Name:</label>
<input type="text" id="lastName" name="lastName" value="" required/>
<label>Email:</label>
<input type="text" id="email" name="email" value="" required/>
<label>Birthday:</label>
<input type="text" id="birthDate" name="birthDate" value="" required/>
<label>Role:</label>
<select id="role">
<option selected="selected">USER</option>
<option>ADMIN</option>
</select>
<button class="save">Save</button>
</div>
</form>

Related

Validation not working using Jquery Validation plugin

I am using the jquery validation plugin for my form validation and form is inside a modal, but it is not working. Does it work with modal? or there might be a problem with my code?
Here is my javascript:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
Here is my html form (I've already added a css for error label):
<script src="{{asset('js/jquery-2.0.0.min.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/form-validation.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/jquery.validate.min.js')}}" type="text/javascript">
</script>
<form method="post" action="{{route('profile.update', ['id'=> Auth::id()])}}" enctype="multipart/form-data" id="gen_form">
{{csrf_field()}}
<h4 class="modal-title" id="myModalLabel"> <b>General Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="lname" value="{{$user->lname}}" />
<br>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">First Name</label>
<input type="text" class="form-control" id="fname" name="fname" value="{{$user->fname}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group label-floating has-success">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location" value="{{$user->location}}" />
</div>
</div>
<h4 class="modal-title" id="myModalLabel"> <b>Contact Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Contact Number</label>
<input type="text" class="form-control" id="contact_no" name="contact_no" value="{{$user->contact_no}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" value="{{$user->email}}" />
<p class="validations">Hello</p>
</div>
</div>
Do anyone here have an idea what is going on?
Your script is invalid.
Perhaps try
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
}
});
});
and see if you have better luck?
I think, you have some syntax errors.
Try to do something like this:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
You are missing a closing curly bracket and a comma at the end of the rules section, right before messages:
[...]
'email': {
email: true
},
}, /* <--- This one */
messages: {
fname: {
[...]

Display form values in another div(display) using jquery on submit

It is an easy code. Maybe using $().html() or .text().
Since Iam new to jquery so plz an easy to understand code.
Inspite of searching on previous similar posts I am still confused.
Do I need to create another js file or I have to make changes in the existing js file.
Guys if possible plz provide a jquery code.
(function($, W, D {
var JQUERY4U = {};
JQUERY4U.UTIL = {
setupFormValidation: function() {
$("#form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
bio: "required",
password: {
required: true,
minlength: 5
},
passwordcp: {
equalTo: "#password"
}
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
passwordcp: "Password not matching",
email: "Please enter a valid email address",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
HTML
<form action="" id="form" >
<div class="formelement">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname"/>
</div>
<div class="formelement">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname"/>
</div>
<div class="formelement">
<label for="email">Email-ID</label>
<input type="text" name="email"/>
</div>
<div class="formelement">
<label for="bio">BIO</label>
<textarea rows="3" cols="30" name="bio"></textarea>
</div>
<div class="formelement">
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</div>
<div class="formelement">
<label for="passwordcp">Confirm-Password</label>
<input type="password" name="passwordcp" id="passwordcp" />
</div>
<div class="formelement">
<input type="submit" value="SUBMIT" class="submit"/>
</div>
</form>
<div class="display"></div>
I would just do it like this, see it in action here: http://jsfiddle.net/awsxtkd0/
$(document).ready(function() {
$("#form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
bio: "required",
password: {
required: true,
minlength: 5
},
passwordcp: {
equalTo: "#password"
}
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
passwordcp: "Password not matching",
email: "Please enter a valid email address",
}
});
$('#form').submit(function() {
if($('#form').valid()) {
var str = '';
str += $('#firstname').val() + '<br />';
str += $('#lastname').val() + '<br />';
str += $('#email').val() + '<br />';
str += $('#bio').val() + '<br />';
$('.display').append(str);
}
return false;
});
});

jQuery Validate Plugin doesn't work

I'm using jQuery and jQuery Validate Plugin on a test page, my code is based on validate demo
<html>
<head>
<script src="http://jquery.bassistance.de/validate/lib/jquery-1.9.0.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submited!!!"); }
});
$().ready(function() {
$("#registerForm").validate({
rules : {
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlenght: 5
},
confirm_password: {
required: true,
minlenght: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
messages : {
username: {
required: "Please enter a username",
minlenght: "Your username must consist at least 2 characters"
},
password: {
required: "Please enter a password ",
minlenght: "Your password must consist at least 5 characters"
},
confirm_password: {
required: "Please repeat the password",
minlenght: "Your password must consist at least 5 characters",
equalTo: "This password doesn't match with the original password"
},
email: {
required: "Please enter a email",
email: "Invalid email"
}
}
});
});
</script>
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#registerForm { width: 670px; }
#registerForm label.error {
margin-left: 10px;
width: auto;
display: inline;
color: red;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body class="zoom: 1;">
<div id="main">
<form id="registerForm" method="post" action="" novalidate="novalidate">
<fieldset>
<legend>OLA MUNDO</legend>
<p><label for="username">Nome</label>
<input id="username" name="username" type="text" value=""></p>
<p><label for="email">E-mail</label>
<input id="email" name="email" type="email" value=""></p>
<p><label for="password">Password</label>
<input id="password" name="password" type="password" value=""></p>
<p><label for="confirm_password">Confirm Password</label>
<input id="confirm_password" name="confirm_password" type="password" value=""></p>
<p><input type="submit" class="submit" value="Enviar"></p>
</fieldset>
</form>
</div>
</fieldset>
</body>
The problem is that in my page the code doesn't work and i don't know why it happens.
I have a jquery.js file in my scripts directory but the script isn't loaded.
So i used the jquery from the demo site, i used the jquery hosted on google and that doesn't solves the problem. I don't know if the problem is on the script code, because i'm kind of newbie on javascript.
#Edit
I solved the problem but now the password and confirm password field doesn't validate, why? the js code is correct
you are writing your js before DOM is built up. Till then browser have not idea what register from is . So you have two option either put your javascript at bottom of page just above tag or use window.onLoad function. This will work ...
instead of $("registerForm") you should select by id $("#registerForm")
jquery selectors
you missed mention the selector id $("#registerForm")and messages every method mention , operator
JS:
$.validator.setDefaults({
submitHandler: function() { alert("submited!!!"); }
});
$().ready(function() {
$("#registerForm").validate({
rules : {
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlenght: 5
},
confirm_password: {
required: true,
minlenght: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
}
},
messages : {
username: {
required: "Please enter a username",
minlenght: "Your username must consist at least 2 characters"
}, //missed comma
password: {
required: "Please enter a password ",
minlenght: "Your password must consist at least 5 characters"
}, //missed comma
confirm_password: {
required: "Please repeat the password",
minlenght: "Your password must consist at least 5 characters",
equalTo: "This password doesn't match with the original password"
}, //missed comma
email: {
required: "Please enter a email",
email: "Invalid email"
}
}
});
});

jQuery.validate.js equalTo refuses to work

I am trying to validate that my one password equals the other. The system keeps flagging the passwords not equal error.
Let me post my code:
<div class="fieldWrapper">
<label for="password" id="id_password">Password: </label>
<input id="id_password" type="password" placeholder="Password" name="password" maxlength="128" class="valid">
</div>
<div class="fieldWrapper">
<label for="password_verification">Confirm:</label>
<input id="id_password_verification" type="password" placeholder="Confirm" name="password_verification" maxlength="128">
</div>
$(document).ready(function()
{
$("#signup-form").validate({
rules: {
password: {
required: true,
minlength: 5
},
password_verification: {
required : true,
equalTo: "#id_password"
}
},
messages: {
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password_verification: {
required: "Please enter your password again",
equalTo: "Please enter the same password as above"
},
},
submitHandler: function(form) {
form.submit();
}
});
});
Does anyone have any clue where I am going wrong here? Note that my form has the id signup-form.
You have dupplicate id in your HTML:
<label for="password" id="id_password">Password: </label>
remove id from the label.

jQuery validation plugin odd behavior

I'm using the jQuery validation plugin for a simple form (name, email, and phone number). Everything is working well except for the phone, which keeps a class of error despite my typing a correct phone number...
Here are the relevant pieces of code :
Form :
<form action="" method="post">
<h2>Devis gratuit</h2>
<ul id="errorHolder"></ul>
<div class="field">
<input type="text" name="name" placeholder="Nom"/>
</div>
<div class="field phone-field">
<input type="text" name="phone" placeholder="Téléphone"/>
</div>
<div class="field email-field">
<input type="text" name="email" placeholder="Email"/>
</div>
<label><input type="checkbox" name="optin"/> Recevez des offres promotionnelles</label>
<button type="submit">Envoyer</button>
</form>
And the set of rules :
rules: {
name: "required",
phone: {
required: true,
minlength: 8,
maxLength: 10,
digits: true
},
email: {
required: true,
email: true
}
}
There is an error in your code, it should be:
rules: {
name: "required",
phone: {
required: true,
minlength: 8,
maxlength: 10, //not maxLength
digits: true
},
email: {
required: true,
email: true
}
look at the docs

Categories