Jquery Compare Two Fields Values

hi i have a sign up form , it has six input fields html code

Solution 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:

<scripttype="text/javascript">
<!--
    functioncheckCode() {
        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!";
            returnfalse;
        }
    }
//--></script>

Solution 2:

Well this might work i suppose.,

var password= $('input[name="Password"]').val();
 var repass= $('input[name="RePassword"]').val();

 if(password!=repass){
  varerror = 'Password not matching';
       $('input[name="RePassword"]').next('span').text(error);
       $('input[name="Password"]').next('span').text(error);
         errorCount = errorCount + 1;  
  }elseif(password=="" || repass==""){
            if(password==""){
        varerror = 'Please enter a password.';
       $('input[name="Password"]').next('span').text(error)
         errorCount = errorCount + 1;  
    }else{
           varerror = 'Please enter a repassword.';
       $('input[name="RePassword"]').next('span').text(error)
         errorCount = errorCount + 1;  
  }
   }
   }else{
     continue;
    }

Solution 3:

You can do it like that:

var pass1 = $('input[name=Password]').val();
var pass2 = $('input[name=RePassword]').val();
if(pass1 != '' && pass1 != pass2) {
    //show errorvar 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; 
}

Solution 4:

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

Solution 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;   
            }elseif($this.attr('id') === 'Password'){
                //compare the two fieldsif($('#Password').val() !== $('#RePassword')){
                    //they don't match, do stuff

                }
            }

Share