From jQuery JavaScript Library
« Back to Plugins/Validation/Methods
accept( [extension] )
Makes the element require a certain file extension.
Returns true if the value ends with one of the specified file extensions.
If nothing is specified, only images are allowed (png, jpeg, gif).
Works with text inputs.
Arguments:| extension (Optional) | String | |
|---|
| The allowed file extensions, seperated via "|", defaults to "png|jpe?g|gif" |
Examples:| Name | Type |
|---|
Makes "field" required and ending with ".xls" or ".csv".
$("#myform").validate({
rules: {
field: {
required: true,
accept: "xls|csv"
}
}
});
<!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/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/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: true,
accept: "xls|csv"
}
}
});
});
</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, only .xls and .csv files allowed</label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>