javascript - 更新前验证字段

Question

在我能够执行和 AJAX 更新之前，我一直试图验证我的表单数据。所以基本上我想要实现的是在 ajax 更新功能之前验证表单输入数据。我不知道在下面的方法中将验证函数放在哪里： 我的 AJAX 更新函数：

$("#updateUser").click(function() {
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/updateUser",
                data: $("#updateForm").serialize(),
                success: function(response) {
                    $("#alert").show();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                    alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                } 
            });
        });

这是我试图验证的表格：

    <form id="updateForm">
                    <input type="hidden" id="id" name="id" /> 
                    Name:
                    <input type="text" name="name" id="name" />
                    <br /> 
                    User name:
                    <input type="text" name="username" id="username" />
                    <br /> 
                    Email:
                    <input type="text" name="email" id="email" />
                    <br /> 
                    Authority
                    <input type="text" name="authority" id="authority" />
                    <br />
                </form>

任何建议请帮助，我是 javascript 新手。谢谢

Answer 1

如果您使用jQuery 验证，您可以通过以下方式进行

$("#updateUser").click(function() {

   var form = $( "#updateForm" );
   form.validate();
    if(form.valid()){
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/updateUser",
            data: $("#updateForm").serialize(),
            success: function(response) {
                $("#alert").show();
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            } 
        });
      }
    });

Answer 2

您应该在发送 ajax 调用之前放置验证码。

$("#updateUser").click(function() {
var allright = true;
if ($('#name').val() == ''){
    allright = false;
    highlight_input('#name');
}
if (allright){
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/updateUser",
            data: $("#updateForm").serialize(),
            success: function(response) {
                $("#alert").show();
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                alert("Status: " + textStatus); alert("Error: " + errorThrown); 
            } 
        });
}
    });