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

您应该在发送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); 
            } 
        });
}
    });

Answer 2

如果您使用 jQuery validation ，则可以采用以下方式

$("#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); 
            } 
        });
      }
    });

在更新之前验证字段

2 个答案: