demo of a remote function

http://stackoverflow.com/q/25906421/312208

by Talsja

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
Uncheck this box to make it throw an error message: <input type="checkbox" id="isValid" checked="checked"/>
<form id="form">
	UserName: 
	<input type="text" name="UserName" id="UserName" 
				 autocomplete="off"  
				 data-val="true" 
				 data-val-length="Gebruikersnaam moet minimaal 6 tekens bevatten." 
				 data-val-length-max="256" 
				 data-val-length-min="6" 
				 data-val-required="Gebruikersnaam is verplicht."
				 value="" 
				 aria-describedby="UserName-error"
				 aria-invalid="false"/>



	<br>

	<input type="submit" name="register" id="register" />
</form>
<div id="log"></div>

CSS

.has-error {
    background-color: red;
}

.has-success {
    background-color: green;
}

JavaScript

$('#form').validate({
    rules: {
        UserName: {
            required: true,
            remote: {
                url: '/echo/html/',
                data: {
                    html: function () {
                        //this sets what the remote value will be
                        return $('#isValid').is(':checked')?'':'Not a good email';
                    }
                },
                dataFilter:function(data){
                    $('#log').append('dataFilter triggered with value '+data+'<br>');  
                   if (data.length != 0){
                       return '<p>This email address is already registered.</p>';
                   }else{
                       return true;
                   }    
                },
                type: 'post',
                dataType:'html'
            },
        },
    },
    submitHandler: function (form) {
        $('#log').append('successful submit<br>');
        return false;
    },
});