如何在提交表单时单击提交输入字段开始此 JQuery 验证

How can I start this JQuery validation when the form is submitted clicking on a submit input field?

本文关键字：提交 开始 字段 输入 JQuery 验证 单击 表单      更新时间：2023-09-26

我绝对是JQuery的新手，我有以下问题。在一个页面中，我有一个表单，如下所示：

<s:form id="projectForm">
     <s:textfield name="kmProjectInfo.name" size="19"/>
     .....................................
     .....................................
     .....................................
     <s:submit style="display:none" id="submitButton" action="projectCreationAction"/>
</s:form>

该标记是来自 Struts 2 UI 标记库的标记，该标记简单呈现表单并将以下标准 HTML 输入标记呈现到我的页面中：

<input type="text" id="kmProjectInfo_name" value="" size="19" name="kmProjectInfo.name">

标签将这个标准的HTML提交输入按钮呈现到我的页面中：

<input id="submitButton" type="submit" style="" value="Submit" name="action:projectCreationAction">

然后在我的页面中，我定义了这个 JQuery 验证脚本：

$(document).ready(function() {
    // VALIDATION:
    var validator = $("#projectForm").validate({
        rules: {
            "kmProjectInfo.name": "required"
        },
        messages: {
            "kmProjectInfo.name": "Please enter a project name"
        }
    })
});

如您所见，此脚本简化了先前呈现的具有name="kmProjectInfo.name"的输入字段，并说需要该字段。

我的问题是目前脚本在文档完全加载时启动（因为它被定义为 $（document）.ready（） 函数），但我绝对需要仅在提交表单时才进行验证，单击具有 id="submitButton" 的呈现输入字段，这个：

<input id="submitButton" type="submit" style="" value="Submit" name="action:projectCreationAction">

我该怎么做？你能帮我做吗？

嘟

嘟

试试这个，

$(document).ready(function() {
  $("#projectForm").on('submit',function(){
     // VALIDATION:
     var validator = $(this).validate({
         rules: {
            "kmProjectInfo.name": "required"
         },
         messages: {
            "kmProjectInfo.name": "Please enter a project name"
         }
     });
   });
});

在点击提交按钮时放入您的代码 

$("#submitButton").on('click',function() {
        // VALIDATION:
        var validator = $("#projectForm").validate({
            rules: {
                "kmProjectInfo.name": "required"
            },
            messages: {
                "kmProjectInfo.name": "Please enter a project name"
            }
        })
    });

$(document).on("click","#submitButton",function(e)
{
    // VALIDATION:
    var validator = $("#projectForm").validate({
        rules: {
            "kmProjectInfo.name": "required"
        },
        messages: {
            "kmProjectInfo.name": "Please enter a project name"
        }
    })
});

或者，如果要将其保留在文档就绪正文中：

$(document).ready(function()
{      
    $("#submitButton").click(function(){
        // VALIDATION:
        var validator = $("#projectForm").validate({
            rules: {
                "kmProjectInfo.name": "required"
            },
            messages: {
                "kmProjectInfo.name": "Please enter a project name"
            }
        })
    });  
});
相关文章：