如果表单中的一个输入没有特定值,则阻止表单发送

时间:2014-02-13 04:01:10

标签: jquery ajax forms

现在,当我提交的联系表格的输入值不是4时,一条成功的消息“谢谢,我会很快回复你!”返回,然后清除表单。我应该更改什么,以便如果我输入的输入值不是4,则会阻止表单发送,并提示用户表单失败?

我正在使用此插件作为我的联系表单:http://malsup.github.com/jquery.form.js

// Contact form 
(function(){

    var contactForm = $('form#contact'),
        inputCheck = $('input.check'),
        contactCheck = $('div#contact-check');

    // Check if answered math question correctly
    inputCheck.keyup(function(){
        if($(this).val() == 4){
            contactCheck.fadeOut();
        } else {
            contactCheck.fadeIn();
        }
    });

    // Validate input from contact form
    $('form#contact').validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit({
            clearForm: true,
            success: function(){
                // if it's good, do this
                contactCheck.fadeOut();
                alert("Thanks, I'll get back to you soon!");
            }
        });
        return false;
    },
        invalidHandler: function(form) {
            // if it's bad, do this
            alert('Oops, something went wrong.');
        }
    });   


})();

1 个答案:

答案 0 :(得分:1)

添加自定义验证规则,例如

jQuery.validator.addMethod("value", function (value, element, params) {
    return this.optional(element) || params == value;
}, "Please specify the correct value");

然后为所需元素添加规则

// Validate input from contact form
$('#contact').validate({
    rules: {
        check: {
            required: true,
            value: 4
        }
    },
    messages: {
        check: {
            value: 'The value must be 4'
        }
    },
    submitHandler: function (form) {
        $(form).ajaxSubmit({
            clearForm: true,
            success: function () {
                // if it's good, do this
                contactCheck.fadeOut();
                alert("Thanks, I'll get back to you soon!");
            }
        });
        return false;
    },
    invalidHandler: function (form) {
        // if it's bad, do this
        alert('Oops, something went wrong.');
    }
});

演示:Fiddle