[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery Validate if CheckBox not Selected

Posted on 2012-09-14
3
Medium Priority
?
693 Views
Last Modified: 2012-10-01
Hello,

I'm a little bit stuck with this,

I have a form id = #BrandRate, on which I have the following -

checkbox #nextyear
Select List #nextyearreason

The #nextyearreason is required only if #nextyear is NOT checked...

So far I have (from here) --

<script>
$(".selector").validate({
   rules: {
     contact: {
       required: true,
       email: {
         depends: function(element) {
           return $("#nextyear").not(":checked")
         }
       }
     }
   }
})
</script>

Open in new window


I've not got very far I know! Also what if i need to add additional IDs that are required?

or different validation rules for different IDs?

Thanks
0
Comment
Question by:garethtnash
3 Comments
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 total points
ID: 38399656
Does this work (what you have there is a selector - find all the inputs with id nextyear that are not checked) - whereas this code returns the status of the checkbox
<script>
$(".selector").validate({
   rules: {
     contact: {
       required: true,
       email: {
         depends: function(element) {
           return !$("#nextyear").is(":checked")
         }
       }
     }
   }
})
</script>

Open in new window

0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 1000 total points
ID: 38404383
Here is the working. If the next year checkbox is checked then and then validation is applied to the reason select list.

Test Page

<!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://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#BrandRate").validate({
  rules: {
    nextyearreason: {
      required: {
      depends: function(element) {
           
           return $("#nextyear").is(":checked");
         }
      }
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
  	#field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
	br { clear: both; }
	input { border: 1px solid black; margin-bottom: .5em;  }
	input.error { border: 1px solid red; }
	label.error {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
		padding-left: 16px;
		margin-left: .3em;
                color: red;
	}
	label.valid {
		background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
		display: block;
		width: 16px;
		height: 16px;
	}
</style>
</head>
<body>
  
<form id="BrandRate">

   <label for="nextyear">Next Year: </label><input type="checkbox" id="nextyear" name="nextyear"> <br>
  <label for="nextyearreason">Next Year Reason: </label>
  
   <select name="nextyearreason" id="nextyearreason">
    <option value=""></option>
    <option value="1">Reason1</option>
    <option value="2">Reason2</option>
   </select>
  
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html> 

Open in new window

0
 

Author Closing Comment

by:garethtnash
ID: 38450705
Thank you
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

831 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