Question

我有一个现有的应用程序，它使用JavaScript进行表单验证，我试图用jQuery替换它。我的表单最多有20个字段，我现在只想验证一个字段。

这是我用来验证一个字段的jQuery函数。

$(function() {

 //$(".submit").click(function(){
//   alert("jq");
     $( "#serviceRtpLogMainForm" ).validate({
         rules: {
             p_incdate_in: "required"
                },
         messages: {
             p_incdate_in: "Please enter the inception date."
                },
         submitHandler: function(form) {
                    // do other things for a valid form
                    form.submit();
                 }

 //});
});

以下是表格，提交和相关字段的验证方式。

<html:form action="/serviceRtpLogMain"  styleId="serviceRtpLogMainForm">

<html:text name = "serviceRptLog" property="p_incdate_in" styleId="incidDate" onfocus="cancelRequest1('DATE')" />
           <A href="javascript:cal4.popup();">

<td valign="middle" align="left" width="100%" colspan="4" height=38  class="td3" >
         <input type=submit value=Submit class="submit">
         <input type=reset value=Reset> 
     </td>

我的目的不仅仅是验证字段是否已填写，并且仅在字段填写正确的格式时才提交表单。

我在这里做错了什么？

Answer 1

确保您的html如下所示

<form id="serviceRtpLogMainForm" action="/serviceRtpLogMain">
    <td valign="middle" align="left" width="100%" colspan="4" height="38"  class="td3" >
        <input type="text" name="p_incdate_in" class="p_incdate_in"/>
        <input type="submit" value="Submit" class="submit"/>
     </td>
</form>

和脚本是

$(function() {        

    $( "#serviceRtpLogMainForm" ).validate({
        rules: {
                p_incdate_in: "required"
                },
        messages: {
                 p_incdate_in: "Please enter the inception date."
                 },
        submitHandler: function(form) {
                            // do other things for a valid form
                            form.submit();
                         }

        });

      });

检查Fiddle

或如果您不想使用name属性，请将class属性添加到元素并添加如下所示的规则

       $( "#serviceRtpLogMainForm" ).validate({            
          submitHandler: function(form) {
                            // do other things for a valid form
                            form.submit();
                         }

        });
        $(".p_incdate_in").rules("add", { 
                    required:true,  
                    messages:"Please enter the inception date."
         });

检查Fiddle

Jquery表单验证提交处理程序无法正常工作

1 个答案: