Question

我无法解决这个问题。它按预期验证字段，但无论我尝试什么，我都无法正确挂钩提交。

这是我的表格：

<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>

我的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.');
        }
    };
});

我在我的控制台中唯一得到的是“提交事件已被解雇。”，在表单提交时调用。尽管我付出了努力，但表单始终会尝试发布自己，重新加载页面。

我想在提交时执行此代码：

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"); }
}

我错过了什么？

Answer 1

我重建了JS，并且能够实现这一点。以下是代码，以防有人遇到类似问题：

形式：

<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;
})

验证后提交Ajax（jQuery Mobile + Validator）

1 个答案: