Solved

jquery validation

Posted on 2010-08-31
10
701 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:yingwho
  • 7
  • 3
10 Comments
 
LVL 2

Expert Comment

by:amischol
ID: 33574229
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.
0
 

Author Comment

by:yingwho
ID: 33581959
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

0
 
LVL 2

Expert Comment

by:amischol
ID: 33591253
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.
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:yingwho
ID: 33592913
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

0
 
LVL 2

Expert Comment

by:amischol
ID: 33593845
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.
0
 
LVL 2

Expert Comment

by:amischol
ID: 33593847
<select id="sc">
      <option value="sel">Please select one</option>
      <option value="city">whats ur city of birth?</option>
</select>
0
 
LVL 2

Expert Comment

by:amischol
ID: 33593848
<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.
0
 
LVL 2

Accepted Solution

by:
amischol earned 500 total points
ID: 33593860
Hi, this is the page working.

The problem was that you missed to put a name to the secret question control.

Thanks.
validation-plugin.png
0
 

Author Closing Comment

by:yingwho
ID: 33594018
great. how to add custom message for it?
0
 
LVL 2

Expert Comment

by:amischol
ID: 33594468
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. :-)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question