jQuery validator test

by nvtvantruong

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<form id="experiment" action="/" method="post">

<fieldset>
  <legend></legend>
        <div class="editor-label">
          <label for="Email">Email</label>
        </div>
        <div class="editor-field">
<input data-val="true" data-val-email="&amp;#39;Email&amp;#39; not valid email address." data-val-required="&amp;#39;Email&amp;#39; is mandatory." id="Email" name="Email" type="text" value=""><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>        
        </div>
        <div class="editor-label">
          <label for="FirstName">First name</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
          <label for="LastName">Last name</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" id="LastName" name="LastName" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>   
</fieldset>
    <p>
        <button type="submit" class="save ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" value="Save" role="button" aria-disabled="false"><span class="ui-button-text">Save</span><span class="ui-button-icon-secondary ui-icon ui-icon-disk"></span></button>

    </p>
</form>
<br/>

<button id="add">Add error</button>
<button id="remove">Remove error</button>
<button id="reset">Reset validator</button>

<br/>
<br/>
Debug:
<div id="debug"></div>

CSS

.field-validation-error{
    color:red;
}

.input-validation-error{
    border:1px solid red;
}
h1{
    font-weight:bold;
}
#debug{
    font-size:small;
}

JavaScript

var validator = {};

function addError(e) {
    validator.showErrors({
        "FirstName": "test error"
    });
}

function removeError(e) {
    validator.showErrors({
        "FirstName": nuáll
    });
}

function resetValidator(e) {
    validator.resetForm();
}

$(document).ready(function() {
    var $form = $("#experiment");
    // prevent form submission
    $form.submit(function(e){e.preventDefault(); return false;});
    validator = $form.validate();
    $("#add").click(addError);
    $("#remove").click(removeError);
    $("#reset").click(resetValidator);
    $("#debug").html("<h1>Validator properties:</h1>");
    for (var i in validator) {
        var row = $("<span></span>").html(i).append("<br/>");
        $("#debug").append(row);
    }
});