Question

我正在尝试编写jquery验证，但我不想使用插件

这是我的ajax我想知道如何在发布之前实现验证。

    $('#insert_ticket').submit(function(e){
    var postData = $(this).serialize();
    alert(postData);

    $.ajax({
        type: 'POST',
        url: 'http://localhost/api/eric_api.php?q=insertseries',
        data: postData,
        success: function(response){
            $('#insert_ticket').find('.form_result').html(response);
        },
        error: function(){
            alert('error');
        }
    });
    e.preventDefault();
});

好的，我现在已经添加了验证测试

$('#insert_ticket').submit(function(e){
    var postData = $(this).serialize();
    $('.error').hide();
    if($('#user_error').length == ""){
    $('.error').show();
    return false;
}

    $.ajax({
        type: 'POST',
        url: 'http://localhost/api/eric_api.php?q=insertseries',
        data: postData,
        success: function(response){
            $('#insert_ticket').find('.form_result').html(response);
        },
        error: function(){
            alert('error');
        }
    });
    e.preventDefault();
});

我的代码不起作用，但是如果我把它放在上面就有了它的作用，因为它隐藏了字段，除非该字段是enpty。然而，如果它是空的，它仍然会发布。

这是我的HTML代码

<div class="wrapper">
        <h1>Ticketing System</h1>
        <div>
            <div id="ticket_form_wrapper">
                <form  id="insert_ticket" method="post" action="">
                    <p>
                        <label for="user">User</label>
                        <br />
                        <input type="user" name="user" id="user" class="post_fields" />
                        <div class="error" id="user_error">This is a required field</div>
                    </p>
                    <p>
                        <label for="email">Email</label>
                        <br />
                        <input type="email" name="email" id="email" class="post_fields" />
                        <div class="error" id="email_req_error">This is a required field</div>
                        <div class="error" id="email_invalid_error">This is not a valid email</div>
                    </p>
                    <p>
                        <label for="summary">Summary</label>
                        <br />
                        <input type="summary" name="summary" id="summary" class="post_fields" />
                        <div class="error" id="summary_error">This is a required field</div>
                    </p>
                    <p>
                        <label for="due_date">Due Date</label>
                        <br />
                        <input type="due_date" name="due_date" id="due_date" class="post_fields" />
                        <div class="error" id="invalid_date">This is not a valid Date</div>
                    </p>
                    <p>
                        <label for="problem_type">Problem Type</label>
                        <br />
                        <input type="problem_type" name="problem_type" id="problem_type" class="post_fields" />
                    </p>
                    <p>
                        <label for="status">Status</label>
                        <br />
                        <input type="status" name="status" id="status" class="post_fields" />
                    </p>
                    <p>
                        <input type="submit" id="submit" value="Submit" />
                        <input type="button" onclick="window.location='index.php'" value="Go to List"/>
                        <div class="form_result"> </div>
                    </p>
                </form>
            </div>

        </div>

Answer 1

您可以在alert（postData）行进行验证;如果它没有验证，则显示错误消息并在那里返回false。

Answer 2

将验证码放在Ajax的beforeSend中。即。

 $.ajax({
    type: 'POST',
    url: 'http://localhost/api/eric_api.php?q=insertseries',
    data: postData,
    beforeSend: function(xhr, options){
        // put your validation code here.
        // use xhr.abort(); if validation fails.
    },
    success: function(response){
        $('#insert_ticket').find('.form_result').html(response);
    },
    error: function(){
        alert('error');
    }
});

jQuery.ajax()

的详细信息

在没有jquery验证插件的情况下在ajax post之前验证表单

2 个答案: