var field_val = $.trim( field.val() );

var dv_placeholder = $.trim( field.attr("data-validation-placeholder") );

var placeholder = $.trim( field.attr("placeholder") );

if (

( !field_val )

|| ( dv_placeholder && field_val == dv_placeholder )

|| ( placeholder && field_val == placeholder )

) {

}

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>JQuery Validation Engine</title>

<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css" />

<link rel="stylesheet" href="../css/template.css" type="text/css" />

<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>

<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>

<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>

<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

<script>

jQuery(document).ready(function(){

// binds form submission and fields to the validation engine

jQuery("#formID").validationEngine();

jQuery('#formID').validationEngine('validate');

});

</script>

<p>

<a href="#" onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">Evaluate form</a>

| <a href="../index.html" >Back to index</a>

</p>

<p>

file input not included in tests, as it can only be set by the user<br />

select does not have a placeholder attribute in html5, however a custom placeholder value can be defined with jquery data attribute<br />

<br />

ids to check:

<li>b4b650107d6715de9804f6506f94c98894264230 - <span style="color:red">broken</span>

<li>30092b1e57e277f22d0ffcb8bd768ffeb9eb02d6 - <span style="color:red">broken</span>

<li>8c690f39fdc6cde2a30abe4a5098da48c1e2f7fb - <span style="color:red">broken</span>

<li>70734226e588e662dc83b0e66aa91853a03f0c19 - <span style="color:red">broken</span>

<li>7f6df30e7cffc680b725eb14f32af4e464cc539e - <span style="color:red">broken</span>

<li>7c5b05527af47832468b9d6682266d11081fc24f - <span style="color:red">broken</span>

<li>391b738156e23e05121199d7539746bf8f2c0f68 - <span style="color:red">broken</span>

<li>a4649825cbfd996e76c37e8a0683de5f5362db0d - <span style="color:green">working</span>

</p>

<form id="formID" class="formular" method="post">

<h1>none of the following should validate</h1>

<fieldset>

<legend>required + empty</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="ereq1" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="ereq2" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="ereq3" type="textarea" />

</label>

<legend>select-one</legend>

<label>

<select class="validate[required]" id="ereq4">

<option></option>

<option>a</option>

</select>

</label>

<legend>select-multiple</legend>

<label>

<select class="validate[required]" id="ereq5" multiple="multiple">

<option></option>

<option>a</option>

</select>

</label>

</fieldset>

<fieldset>

<legend>required + whitespace</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="wreq1" value=" " type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="wreq2" value=" " type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="wreq3" value=" " type="textarea" />

</label>

<legend>select-one</legend>

<label>

<select class="validate[required]" id="wreq4">

<option> </option>

<option>a</option>

</select>

</label>

<legend>select-multiple</legend>

<label>

<select class="validate[required]" id="wreq5" multiple="multiple">

<option> </option>

<option>a</option>

</select>

</label>

</fieldset>

<fieldset>

<legend>

required + data-validation-placeholder

</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="dreq1" data-validation-placeholder="placeholder" value="placeholder" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="dreq2" data-validation-placeholder="placeholder" value="placeholder" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="dreq3" data-validation-placeholder="placeholder" value="placeholder" type="textarea" />

</label>

<legend>select-one</legend>

<label>

<select class="validate[required]" id="dreq4" data-validation-placeholder="placeholder" >

<option>placeholder</option>

<option>a</option>

</select>

</label>

<legend>select-multiple</legend>

<label>

<select class="validate[required]" id="dreq5" data-validation-placeholder="placeholder" multiple="multiple">

<option>placeholder</option>

<option>a</option>

</select>

</label>

</fieldset>

<fieldset>

<legend>required + data-validation-placeholder + partial whitespace</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="dwreq1" data-validation-placeholder="placeholder" value=" placeholder" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="dwreq2" data-validation-placeholder="placeholder" value=" placeholder" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="dwreq3" data-validation-placeholder="placeholder" value=" placeholder" type="textarea" />

</label>

<legend>select-one</legend>

<label>

<select class="validate[required]" id="dwreq4" data-validation-placeholder="placeholder" >

<option value=" placeholder"> placeholder</option>

<option>a</option>

</select>

</label>

<legend>select-multiple</legend>

<label>

<select class="validate[required]" id="dwreq5" data-validation-placeholder="placeholder" multiple="multiple">

<option value=" placeholder"> placeholder</option>

<option>a</option>

</select>

</label>

</fieldset>

<fieldset>

<legend>

required + placeholder

</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="preq1" placeholder="placeholder" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="preq2" placeholder="placeholder" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="preq3" placeholder="placeholder" type="textarea" />

</label>

</fieldset>

<fieldset>

<legend>

required + placeholder + partial whitespace

</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="pwreq1" placeholder="placeholder" value=" placeholder" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="pwreq2" placeholder="placeholder" value=" placeholder" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="pwreq3" placeholder="placeholder" value=" placeholder" type="textarea" />

</label>

</fieldset>

<h1>the following should all validate</h1>

<fieldset>

<legend>required + data-validation-placeholder + valid data</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="dvreq1" data-validation-placeholder="placeholder" value="valid data" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="dvreq2" data-validation-placeholder="placeholder" value="valid data" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="dvreq3" data-validation-placeholder="placeholder" value="valid data" type="textarea" />

</label>

<legend>select-one</legend>

<label>

<select class="validate[required]" id="dvreq4" data-validation-placeholder="placeholder" >

<option value=" placeholder"> placeholder</option>

<option selected="selected">a</option>

</select>

</label>

<legend>select-multiple</legend>

<label>

<select class="validate[required]" id="dvreq5" data-validation-placeholder="placeholder" multiple="multiple">

<option value=" placeholder"> placeholder</option>

<option selected="selected">a</option>

</select>

</label>

</fieldset>

<fieldset>

<legend>

required + placeholder + valid data

</legend>

<legend>text</legend>

<label>

<input class="validate[required]" id="pvreq1" placeholder="placeholder" value="valid data" type="text" />

</label>

<legend>password</legend>

<label>

<input class="validate[required]" id="pvreq2" placeholder="placeholder" value="valid data" type="password" />

</label>

<legend>textarea</legend>

<label>

<input class="validate[required]" id="pvreq3" placeholder="placeholder" value="valid data" type="textarea" />

</label>

</fieldset>

<input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>

</form>