在提交表单之前验证表单

时间:2014-11-11 10:57:32

标签: javascript jquery forms jquery-validate

我的jsp页面中有一个表单。我使用Ajax提交表单。我没有使用submit类型按钮,我使用button类型按钮来调用包含javascript的{​​{1}}函数。我在上面提到的按钮点击上调用了javascript函数。 现在我需要验证我的表单。为此,我使用来自here.的jquery表单验证。他们使用这样的函数来验证表单。

ajax

现在我无法弄清楚在提交表单之前如何验证表单。以上功能不能以这种方式调用。

$(function(){

                 $("#detailForm").validate({
                     rules:{
                         regdate:{
                             required:true
                         },
                         agreementNo:{
                             required:true
                         },
                         customerName:{
                             required:true
                         },
                         customerAddress:{
                             required:true
                         },
                         customerNic:{
                             required:true
                         },
                         telephoneNo:{
                             required:true
                         },
                         jobDescription:{
                             required:true
                         }

                     }
                 });

             });

他们在提交类型按钮上调用验证功能点击。

那我怎么能这样做呢。我需要验证函数并在我的按钮类型按钮单击上调用包含ajax的javascript。在这种情况下帮助我。 谢谢!

2 个答案:

答案 0 :(得分:1)

您需要在加载时定义规则。然后,点击按钮后,您可以使用valid()方法检查表单'状态。

$("#btn1").on('click',function(){
    if ($("#detailForm").valid()) {
        // form is fine, send data as needed
    }
    else {
        // form was not valid. Messages should have been shown.
    }
});

答案 1 :(得分:0)

您需要使用validate的结果:

$("#btn1").on('click',function(){
    var validator = $("#detailForm").validate({
     rules:{
         regdate:{
             required:true
         },
         agreementNo:{
             required:true
         },
         customerName:{
             required:true
         },
         customerAddress:{
             required:true
         },
         customerNic:{
             required:true
         },
         telephoneNo:{
             required:true
         },
         jobDescription:{
             required:true
         }
     }
    });

    if (validator.form())
    {
        //form is valid
        return true;
    }
    else
    {
        //can also display error messages using validator.showErrors(errors)
        return false;
    }
});