form validation SO 16381867

by Gerald Gillespie

HTML

put cursor in box hit enter to submit. hit multiple times if you want. try it as empty and non-empty
<br/>
<form id="login" action="/echo/json/">
    <input type="text" value="some data" size="100" width="100%" />
</form>
<hr/>results:
<br/>
<div id="results"></div>

JavaScript

var fakeValuesToSubmit = function ($e) {
    var o = {};
    $e = $e.find('input:first');
    if ($e.length == 0) {
        throw $.error('error');
        return false;
    }
    o[$e.attr('name')] = $e.val();
    console.log(o);

    var J = // fake return data that works in a fiddle.  
    {
        "output": "",
            "status": -1,
            "error_messages": {}
    };


    // augment the fake response depening on form completeness.  you are generating this in messages.php
    if ($e.val() == '') {
        J['error_messages']['error'] = ["please enter your name."];
        J['error_messages']['success'] = [""];
    } else {
        J['error_messages']['error'] = [""];
        J['error_messages']['success'] = ["atta boy"];
    }

    // you would have submitted $('#login).serialize() but i can't do that in a fiddle
    return {
        json: JSON.stringify(J),
    delay: 2 // fake delay for drama
    }
}

function appendLog(str, extra) {
    var $log = $('#results');
    extra = extra ? '<br/>' : '';
    $log.html($log.html() + '<br/>' + str + extra);
}

$(document).ready(function () {
    $('#login').submit(function () {
        var $this = $(this);
        console.log($this.attr('action'));
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: $this.attr('action'), 
            data: fakeValuesToSubmit($this),  // this is where you're going to use your own data

        }).done(function (data) {
             console.log("done!",data);
             console.log("done!",JSON.stringify(data));            
             var msg = data['error_messages']['success'][0] != '' ?  data['error_messages']['success'][0] : data['error_messages']['error'][0] ; 
            appendLog(msg);
        })
        .fail(function () {
            console.log("fail");
        });
        return false; // prevents normal behaviour
    });

});