Question

I’m having trouble getting this to work. It validates the fields as expected, but no matter what I try, I can’t properly hook the submit.

Here’s my form:

<form action="" id="m-frm-contact_us" class="m-contact_submit" method="post" data-ajax="false">
  <input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required" minlength="2" maxlength="36" />
  <input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required" minlength="2" maxlength="36" />
  <input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email" />
  <button type="submit" name="submit_contact" value="clicked">Submit</button>
</form>

My JS:

$(document).ready(function(){
    $.validator.addMethod(
        'placeholder', function(value, element) {
            return value != $(element).attr("placeholder");
        }, 'This field is required.'
    );

    $("#m-frm-contact_us").validate({
        rules: {
            firstName: {
                required: true,
                minlength: 5,
                placeholder: true
            },
            lastName: {
                required: true,
                minLength: 5,
                placeholder: true
            },
            mail: {
                required: true,
                email: true,
                placeholder: true
            }
        },
        messages: {
            firstName: "First name is required.",
            lastName: "Last name is required.",
            email: "Valid email address is required."
        },
        submitHandler: function(form) {
            console.log('submitHandler fired.');
            contact.submit();
            return false;
        }
    });

    $('#m-frm-contact_us').submit(function(e){
        console.log('Submit event fired.');
        e.preventDefault();
        return false;
    });

    var contact = {
        submit : function(){
            console.log('Form is being submitted.');
        }
    };
});

The only thing I get in my console is ‘Submit event fired.’, called on form submit. Despite my efforts, the form always tries to post to itself, reloading the page.

I want to execute this code on submit:

var contact = {
    submit : function(){
        console.log('Form is being submitted.');
        var _this = this,
        post = $.post("/path/to/submit.php", $("#m-frm-contact_us").serialize(), function(response){
            try{
                if(response==1) {
                    _this.passed();
                } else {
                    _this.error();
                }
            }
            catch(e){
                if(typeof e == 'string') console.log(e);
                _this.error();
            }
        });
    },
    error : function(){ $.mobile.changePage("#error"); },
    passed : function(){ $.mobile.changePage("#passed"); }
}

What am I missing?

Answer 1

I rebuilt the JS, and was able to get this working. Here’s the code, in case anyone experiences a similar issue:

Form:

<form action="" method="post" id="m-frm-contact_us" novalidate="novalidate">
    <input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required placeholder noSpecial" minlength="2" maxlength="36">
    <input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required placeholder" minlength="2" maxlength="36">
    <input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email">
    <button type="submit" name="submit_contact" value="clicked">Submit</button>
</form>

JS:

$.validator.addMethod('noPlaceholder', function(value, element) {
    return value !== element.defaultValue;
}, 'This field is required.');
$.validator.addMethod(
    'placeholder', function(value, element) {
        return value != $(element).attr("placeholder");
    }, 'This field is required.'
);
$.validator.addMethod("regex", function(value, element, regexp) {
    var check = false;
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
}, "No special Characters allowed here. Use only upper and lowercase letters (A through Z; a through z)");

$('#m-frm-contact_us').submit(function(event) {
    event.preventDefault();

    if($(this).validate({
        rules : {
            first_name : {
                required : true,
                maxlength : 36,
                regex : /^[A-Za-z\s`'"\\-]+$/
            },
            last_name : {
                required : true,
                maxlength : 36,
                regex : /^[A-Za-z\s`'"\\-]+$/
            }
        }
    }).form()) {
        var $form = $(this), formData = {
            firstName : $form.find('#first').val(),
            lastName : $form.find('#last').val(),
            mail : $form.find('#mail').val()
        };
        $.post('/path/to/submit.php', formData, function(response) {
            if(response == 1) {
                $.mobile.changePage("#passed");
            } else {
                $.mobile.changePage("#error");
            }
        })
    };

    return false;
})