asked on

jquery validation

trying to validate a dropdown with notEqualTo: keyword. its not working. please check.
the error message should popup as this field is required for secret question dropdown.

thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
.error { float: left; color: red; padding-left: .5em; vertical-align: top; }
.red { color:red; }
</style>
<script>
$(document).ready(function(){
  $("#commentForm").validate({
    rules: {
      username: "required",
      password: "required",
      cpassword: {
        required: true,
        equalTo: "#password"
      },
	  sc: {
        required: true,
        notEqualTo: "sel"
      },
	  answer: "required"
    },
    errorPlacement: function(err,el) {
      var br = $('<br>');
      $(el).before(br);
      err.insertBefore(br);
    }
  });
});
</script>   
</head>
<body>
  <form id="commentForm" method="get" action="">
        <table width="600" cellpadding="2" cellspacing="0">
        <tr>
            <td width="200px">Username<span class="req">*</span></td>
            <td width="400px"><input id="username" type="text" name="username" size="25" minlength="2" /></td>
        </tr>
        <tr>
            <td>Password<span class="req">*</span></td>
            <td><input id="password" type="password" name="password" size="35" minlength="2" /></td>
        </tr>
        <tr>
            <td>Confirm Password<span class="req">*</span></td>
            <td><input id="cpassword" type="cpassword" name="cpassword" size="35" minlength="2" /></td>
        </tr>
		<tr>
            <td>Secret Question<span class="req">*</span></td>
            <td>
				<select id="sc">
					<option value="sel">Please select one</option>
					<option value="city">whats ur city of birth?</option>
				</select>
			</td>
        </tr>
		 <tr>
            <td width="200px">Answer<span class="req">*</span></td>
            <td width="400px"><input id="answer" type="text" name="answer" size="25" minlength="2" /></td>
        </tr>
     </table>           
         <input class="submit" type="submit" value="Submit"/> 
  </form>
</body>
</html>

Open in new window

amischol

Hi, this type of validation doesn't exist on the jquery.validation plugin.

The methods that are native from the plugin are:

required, remote, email, url, date, dateISO, number, digits, creditcard, equalTo, accept,maxlength, minlength, rangelength, range,max,min

You have to add a new method like this:

If you want to pass a value and check it.

$.validator.addMethod("notEqualTo", function(value, element, param)
{
      var bNotEquals = false;
if(value != param)
{
bNotEquals = true;
}
      return bNotEquals;;
});

If you want to pass an input and check his value:

$.validator.addMethod("notEqualTo", function(value, element, param)
{
var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
                        $(element).valid();
                  });
       return value != target.val();
});

That's all.

yingwho

ASKER

i tried using it, but it does nothing, do u know what i am missing?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
.error { float: left; color: red; padding-left: .5em; vertical-align: top; }
.red { color:red; }
</style>
<script>


$(document).ready(function(){

$.validator.addMethod("notEqualTo", function(value, element, param)
{
           var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
                        $(element).valid();
                  });
        return value != target.val();      
});


  $("#commentForm").validate({
    rules: {
      username: "required",
      password: "required",
      cpassword: {
        required: true,
        equalTo: "#password"
      },
	  sc: {
        required: true,
        notEqualTo: "sel"
      },
	  answer: "required"
    },
    errorPlacement: function(err,el) {
      var br = $('<br>');
      $(el).before(br);
      err.insertBefore(br);
    }
  });
});
</script>   
</head>
<body>
  <form id="commentForm" method="get" action="">
        <table width="600" cellpadding="2" cellspacing="0">
        <tr>
            <td width="200px">Username<span class="req">*</span></td>
            <td width="400px"><input id="username" type="text" name="username" size="25" minlength="2" /></td>
        </tr>
        <tr>
            <td>Password<span class="req">*</span></td>
            <td><input id="password" type="password" name="password" size="35" minlength="2" /></td>
        </tr>
        <tr>
            <td>Confirm Password<span class="req">*</span></td>
            <td><input id="cpassword" type="cpassword" name="cpassword" size="35" minlength="2" /></td>
        </tr>
		<tr>
            <td>Secret Question<span class="req">*</span></td>
            <td>
				<select id="sc">
					<option value="sel">Please select one</option>
					<option value="city">whats ur city of birth?</option>
				</select>
			</td>
        </tr>
		 <tr>
            <td width="200px">Answer<span class="req">*</span></td>
            <td width="400px"><input id="answer" type="text" name="answer" size="25" minlength="2" /></td>
        </tr>
     </table>           
         <input class="submit" type="submit" value="Submit"/> 
  </form>
</body>
</html>

Open in new window

amischol

Hi.
You're using the incorrect method.

You want to check for a different value from "sel" but you put the validator method to apply to an input.

try the another one.

$.validator.addMethod("notEqualTo", function(value, element, param)
{
var bNotEquals = false;
if(value != param)
{
bNotEquals = true;
}
return bNotEquals;;
});

Try and say me someting.

yingwho

ASKER

tried that too.. did not work. pl try at ur end.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
.error { float: left; color: red; padding-left: .5em; vertical-align: top; }
.red { color:red; }
</style>
<script>


$(document).ready(function(){

$.validator.addMethod("notEqualTo", function(value, element, param)
{
      var bNotEquals = false;
        if(value != param)
        {
             bNotEquals = true;
        }
      return bNotEquals;;
});


  $("#commentForm").validate({
    rules: {
      username: "required",
      password: "required",
      cpassword: {
        required: true,
        equalTo: "#password"
      },
	  sc: {
        required: true,
        notEqualTo: "sel"
      },
	  answer: "required"
    },
    errorPlacement: function(err,el) {
      var br = $('<br>');
      $(el).before(br);
      err.insertBefore(br);
    }
  });
});
</script>   
</head>
<body>
  <form id="commentForm" method="get" action="">
        <table width="600" cellpadding="2" cellspacing="0">
        <tr>
            <td width="200px">Username<span class="req">*</span></td>
            <td width="400px"><input id="username" type="text" name="username" size="25" minlength="2" /></td>
        </tr>
        <tr>
            <td>Password<span class="req">*</span></td>
            <td><input id="password" type="password" name="password" size="35" minlength="2" /></td>
        </tr>
        <tr>
            <td>Confirm Password<span class="req">*</span></td>
            <td><input id="cpassword" type="cpassword" name="cpassword" size="35" minlength="2" /></td>
        </tr>
		<tr>
            <td>Secret Question<span class="req">*</span></td>
            <td>
				<select id="sc">
					<option value="sel">Please select one</option>
					<option value="city">whats ur city of birth?</option>
				</select>
			</td>
        </tr>
		 <tr>
            <td width="200px">Answer<span class="req">*</span></td>
            <td width="400px"><input id="answer" type="text" name="answer" size="25" minlength="2" /></td>
        </tr>
     </table>           
         <input class="submit" type="submit" value="Submit"/> 
  </form>
</body>
</html>

Open in new window

amischol

Hi.
You missed to put the name onf the select control.

You must have a name in each input control.

Validation plugin works with the name of the input controls, and "sc" is only an id.

Try it again, please.

amischol

<select id="sc">
<option value="sel">Please select one</option>
<option value="city">whats ur city of birth?</option>
</select>

amischol

<select id="sc" name="sc">
<option value="sel">Please select one</option>
<option value="city">whats ur city of birth?</option>
</select>

This will work.

ASKER CERTIFIED SOLUTION

amischol

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

yingwho

ASKER

great. how to add custom message for it?

amischol

Hi.

If you want to add a custom message look at this code:

$("#commentForm").validate({
rules: {
username: "required",
password: "required",
cpassword: {
required: true,
equalTo: "#password"
},
sc: {
required: true,
notEqualTo: "sel"
},
answer: "required"
},
messages:{
sc: {
notEqualTo: "Custom message"
}
},
errorPlacement: function(err,el) {
var br = $('<br>');
$(el).before(br);
err.insertBefore(br);
}
});

You must to add a new member on the singleton config called "messages" and follow my code sample.

Thanks for the points. :-)