Real submit on an ajax form

by Emily Humphrey

HTML

<form action="/login" method="POST">
    <input type="email" name="username" required placeholder="Username">
    <input type="password" name="password" required placeholder="Password">
    <button type="submit">Se connecter</button>
</form>

JavaScript

var $form = $(form)
  , $input = $form.find('input')
$form.on('submit', function(e, letSubmit) {
    // Let the form submitting itself
    if (letSubmit) {
        return true
    }
    e.preventDefault()
    $.post(this.action, $form.serialize(), function(res) {
        /**
         * Error
         * res should looks like :
         * {
         *     hasError: true
         *   , field   : 'nameOfTheBadField'
         *   , message : 'Unknow user'
         * }
         */
        $input.removeClass('error')
        if (res.hasError) {
            $input.filter('[name="' + res.field + '"]').addClass('error')
            alert(res.message)
        } else {
            // Submit the form with preventing the default behaviour
            $form.trigger('submit', true)
        }
    })
})