jQuery Validate Plugin doesn't work - javascript

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"
}
}
});
});

Related

How can I add operator ternary on jQuery validate?

My html code like this :
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" />
<input name="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>
My JavaScript code to validate with jQuery validate like this :
jQuery('.validatedForm').validate({
rules: {
"password": {
minlength: 6
},
"password_confirmation": {
minlength: 6,
equalTo : "#password"
}
},
messages: {
"password": 'Please enter a password, minimal 6 characters',
"password_confirmation": 'Please confirm your password'
},
});
Demo and full code like this : http://jsfiddle.net/oscar11/fEZFB/609/
I want to add condition in jQuery validate
If password filled, required: true on password_confirmation
If password not filled, required: false on password_confirmation
Seems I need to add operator ternary on rules password_confirmation. But I'm still confused
How can I do it?
I try to make an answer for your problem, check this out
$(document).ready(function() {
$('.validatedForm').validate({
rules: {
"password": {
minlength: 6,
},
"password_confirmation": {
minlength: 6,
required: function(element) {
return $("input[name=password]").val() != "";
},
equalTo : "#password"
}
},
messages: {
"password": 'Please enter a password, minimal 6 characters',
"password_confirmation": 'Please confirm your password'
},
});
$('button').click(function () {
console.log($('.validatedForm').valid());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" />
<input name="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>

jQuery validation doesn't work on first attempt

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>

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 slide up function not activating in contact form script

Everything is working on this contact form except for the last bit using the slide up function to replace the contact form with a thank you message and I just can't seem to hack my way to a solution.
You fill out the form, hit submit, the email gets sent, and the loading gif appears, but the slideup animation never happens and the thank you image never shows.
<!--CONTACT PANEL-->
<div id="contact-panel">
<div class="top">: : CONTACT ME : :</div>
<form id="contactform" method="post">
<ol class="forms">
<fieldset>
<label for="name"><input type="text" name="name" id="name" value="" placeholder="Name:" required minlength="2" /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="name" class="error"></label></p>
<fieldset>
<label for="email"><input type="text" name="email" id="email" value="" placeholder="Email:" required /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="email" class="error"></label></p>
<fieldset>
<label for="message"><textarea name="message" id="message" placeholder="Question/Comments:" required ></textarea></label>
</fieldset>
<p style="margin-top: -5px;"><label for="message" class="error"></label></p>
<li class="buttons"><button type="submit" id="submitemail">Send Email ยป</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
</ol>
</form>
</div>
Here's the JS...
$(document).ready(function () {
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
},
},
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email: "*Please enter a valid email address.",
message: "*Please, say something at least 10 characters long.",
},
submitHandler: function(form) {
$('#submitemail').hide();
$("#contactform li.buttons").append('<img src="media/contact/loading.gif" alt="Loading" id="loading" />');
$.post('code/form-contact/submitcontactform.php',
$('form#contactform').serialize(),
function(data){
$("#contactform").slideUp("normal", function() {
$("#contactform").before('<img src="media/contact/contact_thankyou.png" alt="Thank You" id="thankyou" />');
});
});
},
})
return false;
});
I have tried a lot of different ways but I just don't know enough beyond guessing and trial and error. Any help would be welcomed.
I did some changes in messages json as below:
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email:
{
email: "*Please enter a valid email address.",
required: "Please enter email address."
},
message:
{
minlength: "*Please, say something at least 10 characters long.",
required: "Please enter message"
}
},
to make it work in fiddle, I had to remove post call as jsfiddle doesn't support it:
http://jsfiddle.net/shifatullah/v3dTz/16/

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.

Categories