jquery compare two fields values - php

Question

hi i have a sign up form , it has six input fields
html code
<div id="signup">
<form id="suform" method="POST" action="signup/newUser">
<p>
<label>Frist Name</label>
<input type="text" name="fName"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Last Name</label>
<input type="text" name="lName"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Email</label>
<input type="text" name="Email"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Mobile Number</label>
<input type="text" name="MNumber"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Password</label>
<input type="password" name="Password"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Re Password</label>
<input type="password" name="RePassword"/>
<span class="errorMessage"></span>
</p>
<p>
<input type="submit" class="button" value="sign up"/>
</p>
</form>
</div>
when the user clicked sign up button , first i ensure that no input fields is empty , if i found any input fields in empty then i print an error message left to that input field ,
jquery code
$(document).ready(function(){
$('#suform').on('submit', function(e){
e.preventDefault();
var errorCount = 0;
$('span.errorMessage').text(''); // reset all error mesaage
$('input').each(function(){
var $this = $(this);
if($this.val() === ''){
var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
$this.next('span').text(error);
errorCount = errorCount + 1;
}
});
if(errorCount === 0){
$(this)[0].submit(); // submit form if no error
}
});
});
i want the user to input his password twice to ensure that he saves it
my question is how to check the two passwords input fields if they are equal or not , and if not i want to print a message error to the left of that two input fields
code

Answer 1

Checking the fields and showing an error without jQuery:
if (document.forms[0].Password.value != document.forms[0].RePassword.value) {
document.forms[0].Password.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
document.forms[0].RePassword.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
}
If there is more than one form on the page (even just a search form) you'll need to adjust document.forms[0] accordingly.
To use this code in your form, add onsubmit="return checkForm();" to the form tag, like:
<form id="suform" method="POST" action="signup/newUser" onsubmit="return checkForm();">
Then, in your script tag, create the function checkCode which will return false (in other words stop form submission) if there's a problem:
<script type="text/javascript">
<!--
function checkCode() {
if (document.forms[0].Password.value != document.forms[0].RePassword.value) {
document.forms[0].Password.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
document.forms[0].RePassword.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
return false;
}
}
//-->
</script>

Answer 2

Well this might work i suppose.,
var password= $('input[name="Password"]').val();
var repass= $('input[name="RePassword"]').val();
if(password!=repass){
var error = 'Password not matching';
$('input[name="RePassword"]').next('span').text(error);
$('input[name="Password"]').next('span').text(error);
errorCount = errorCount + 1;
}else if(password=="" || repass==""){
if(password==""){
var error = 'Please enter a password.';
$('input[name="Password"]').next('span').text(error)
errorCount = errorCount + 1;
}else{
var error = 'Please enter a repassword.';
$('input[name="RePassword"]').next('span').text(error)
errorCount = errorCount + 1;
}
}
}else{
continue;
}

Answer 3

You can do it like that:
var pass1 = $('input[name=Password]').val();
var pass2 = $('input[name=RePassword]').val();
if(pass1 != '' && pass1 != pass2) {
//show error
var error = 'Password confirmation doesn\'t match.';
$('input[name=Password]').next('span').text(error);
$('input[name=RePassword]').next('span').text(error);
errorCount = errorCount + 1;
}
The "for" property in the label is used as follows:
<label for="myPasswordField">
<input type="password" id="myPasswordField" name="Password" />
</label>
So when you click on the label this will set the focus on the related element with that ID attribute.
To check if the phone field is a number you need that:
var mobile = $('input[name=MNumber]').val();
if(isNaN(parseFloat(mobile )) && !isFinite(mobile )) {
var error = 'Mobile number incorect.';
$('input[name=MNumber]').next('span').text(error);
errorCount = errorCount + 1;
}

Answer 4

<p>
<label>Password</label>
<input type="password" name="Password"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Re Password</label>
<input type="password" name="RePassword"/>
<span class="errorMessage"></span>
</p>
if ( $("input[type=password][name='Password']").val() == $("input[type=text][name='RePassword']").val(){
//Do this
}

Answer 5

Something like this? http://jsfiddle.net/K5CMC/
var $this = $(this);
if($this.val() === ''){
var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
$this.next('span').text(error);
errorCount = errorCount + 1;
}else if($this.attr('id') === 'Password'){
//compare the two fields
if($('#Password').val() !== $('#RePassword')){
//they don't match, do stuff
}
}

Answer 6

You can do it like this Demo on JsFiddle
$(document).ready(function(){
$('#suform').on('submit', function(e){
e.preventDefault();
var errorCount = 0;
$('span.errorMessage').text(''); // reset all error mesaage
$('input').each(function(){
var $this = $(this);
if($this.val() === ''){
var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
$this.next('span').text(error);
errorCount = errorCount + 1;
}
else
if($(this).attr('name') == "RePassword")
if($('input[name=Password]').val() != $(this).val())
alert("must have same password");
});
if(errorCount === 0){
$(this)[0].submit(); // submit form if no error
}
});
});​

Answer 7

$(document).ready(function(){
$('#suform').on('submit', function(e){
e.preventDefault();
var errorCount = 0;
$('span.errorMessage').text(''); // reset all error mesaage
$('input').each(function(){
var $this = $(this);
if($this.val() === ''){
var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
$this.next('span').text(error);
errorCount = errorCount + 1;
}
});
if($('input[name="Password"]').val() != $('input[name="RePassword"]').val())
{
var error = 'Password not match'; // take the input field from label
$('input[name="RePassword"]').next('span').text(error);
errorCount = errorCount + 1;
}
if(errorCount === 0){
$(this)[0].submit(); // submit form if no error
}
});
});