From jQuery JavaScript Library
« Back to Plugins/Validation/Methods
required( )
Makes the element always required.
Return false if the element is empty (text input) or unchecked (radio/checkbox) or nothing selected (select).
Works with text inputs, selects, checkboxes and radio buttons.
To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>
Examples:| Name | Type |
|---|
Makes "field" always required. Nothing and blanks are invalid.
$("#myform").validate({
rules: {
field: "required"
}
});
<!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(){
$("#myform").validate({
rules: {
field: "required"
}
});
});
</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;
}
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="myform">
<label for="field">Required: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
Makes the fruit select required.
$("#myform").validate({
rules: {
fruit: "required"
}
});
<!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(){
$("#myform").validate({
rules: {
fruit: "required"
}
});
});
</script>
<style>#fruit { margin-left: .5em; float: left; }
#fruit, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input, select { border: 1px solid black; margin-bottom: .5em; }
select.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;
}
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="myform">
<label for="fruit">Please select a fruit</label>
<select id="fruit" name="fruit" title="Please select something!"
<option value=""></option>
<option value="1">Banana</option>
<option value="2">Apple</option>
<option value="3">Peach</option>
</select>
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
Makes the gender radio buttons required.
$("#myform").validate({
rules: {
gender: "required"
}
});
<!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(){
$("#myform").validate({
rules: {
gender: "required"
}
});
});
</script>
<style>label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input { border: 1px solid black; margin-bottom: .5em; }
label.error {
display:none;
background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
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="myform">
<label for="gender_male">
<input type="radio" id="gender_male" value="m" name="gender" />
Male
</label>
<label for="gender_female">
<input type="radio" id="gender_female" value="f" name="gender"/>
Female
</label>
<label for="gender" class="error">Please select your gender</label>
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
Makes the agree checkbox required.
$("#myform").validate({
rules: {
agree: "required"
}
});
<!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(){
$("#myform").validate({
rules: {
agree: "required"
}
});
});
</script>
<style>#agree { margin-left: .5em; float: left; }
#agree, 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;
}
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="myform">
<label for="agree">Please agree to our policy</label>
<input type="checkbox" id="agree" title="Please agree to our policy!" name="agree" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
required( dependency-expression )
Makes the element required, depending on the result of the given expression.
Return false if the element is empty (text input) or unchecked (radio/checkbox) or nothing selected (select).
Works with all kind of text inputs, selects, checkboxes and radio buttons.
Very often your expression will use selector filters such as #foo:checked, #foo:filled, #foo:visible. (See also Validate custom selectors)
To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>
Arguments:| dependency-expression | String | |
|---|
| An expression (String) is evaluated in the context of the element's form, making the field required only if the expression returns more than one element. |
Examples:| Name | Type |
|---|
Makes details required only if #other is checked.
$("#myform").validate({
rules: {
details: {
required: "#other:checked"
}
}, debug:true
});
$("#other").click(function() {
$("#details").valid();
});
<!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=""></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
details: {
required: "#other:checked"
}
}, debug:true
});
$("#other").click(function() {
$("#details").valid();
});
});
</script>
<style>label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input { border: 1px solid black; margin-bottom: .5em; }
label.error {
display:none;
background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
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="myform">
<label for="other"><input id="other" type="checkbox" />Check to make next field required</label>
<br/>
<input id="details" name="details" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
required( dependency-callback )
Makes the element required, depending on the result of the given callback.
Return false if the element is empty (text input) or unchecked (radio/checkbxo) or nothing selected (select).
Works with all kind of text inputs, selects, checkboxes and radio buttons.
To force a user to select an option from a select box, provide an empty options like <option value="">Choose...</option>
Arguments:| dependency-callback | Callback | |
|---|
| The function is executed with the element as it's only argument: If it returns true, the element is required. |
Examples:| Name | Type |
|---|
Makes details required only if #other is checked.
$("#myform").validate({
rules: {
age: {
required: true,
min: 3
},
parent: {
required: function(element) {
return $("#age").val() < 13;
}
}
}
});
$("#age").blur(function() {
$("#parent").valid();
});
<!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=""></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
age: {
required: true,
min: 3
},
parent: {
required: function(element) {
return $("#age").val() < 13;
}
}
}
});
$("#age").blur(function() {
$("#parent").valid();
});
});
</script>
<style>label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input { border: 1px solid black; margin-bottom: .5em; }
label.error {
display:none;
background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
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="myform">
<label>Age </label><input id="age" name="age" />
<br/>
<label>Parent </label><input id="parent" name="parent" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
