javascript - 表单验证，无需刷新页面

Question

我有一个需要验证的表单。我的表单包含四个元素:articleType 选择框、articleTitle 输入框、articleUrl 输入框和 numPages 选择框。我的articleType 和numPages 选择框是必需的。我的articleTitle和articleUrl输入框都需要是必填的，并且最小长度为10。我的表单永远不会刷新，相反，如果输入的输入正确，它将进入下一页。

这是我的代码:

HTML

<div style="display: none" class="article_Information">


                        <form class="article_information_form" action="" method="POST">
                            <p>Article type</p> 
                            <select name="articleType" required>
                                <option value="" disabled="disabled" selected></option>
                                <option value="Lifestyle">Lifestyle</option>
                                <option value="Entertainment">Entertainment</option>
                                <option value="Society">Society</option>
                                <option value="Strange">Strange</option>
                                <option value="Science">Science</option>
                                <option value="Tech">Tech</option>
                            </select><br>
                            <p>Title </p>
                            <input id="articleTitle" type="text" name="articleTitle" maxlength="75" required>

                            <p style="clear: both">Article URL</p>
                            <input id="articleUrl" type="text" name="articleUrl" maxlength="65" required><br>
                            <div style="display: block; margin: 20px; color: gray">
                            <p style="text-align: center; font-weight: normal; font-size: 15px; display: inline; font-style: italic; clear: both; float: none">URL:</p><p id="urlDisplay" style="text-align: center; font-weight: normal; font-size: 15px; display: inline"></p>
                            </div>
                            <p>Number of pages</p>
                            <select id="numPages" name="numPages" required>
                                <option value="" disabled="disabled" selected></option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                            </select><br>

                             <input id="btn" type="submit" name="article_info_btn" value="Submit">
                        </form>
                    </div> <!--End of article information div-->

jQuery

<script type="text/javascript">


        $(".article_information_form").validate({
        //specify the validation rules
        rules: {
            articleType: "required",
            numPages: "required",
            articleTitle: {
            required: true,
            minlength: 10
            },
            articleUrl: {
            required: true,
            minlength: 10
            }
        },

        //specify validation error messages
        messages: {
        articleType: "First Name field cannot be blank!",
        numPages: "Last Name field cannot be blank!",
        articleTitle: {
        required: "Password field cannot be blank!",
        minlength: "Your password must be at least 6 characters long"
        },
        articleUrl: "Please enter a valid email address"
        },
        }); 

$('.article_information_form').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {
                            $(".article_Information").fadeOut("slow");
                            $(".article_properties").fadeIn("slow");
                            $("#addOne").fadeIn("slow");
                           numPages = $('#numPages option:selected').val();
                           $('.pageNumber').text(numPages);
                           $('.inputNumber').text(numPages);
                        }
                    });
                })

使用我当前的代码，它将显示错误消息，然后转到下一页。如何让它停留在当前页面直到用户纠正错误？另外，我知道 PHP 验证表单更有效，但在这种情况下它还会更好吗？如果是这样，我如何将信息转发回 Ajax，以便可以使用 PHP 显示错误消息？

Answer 1

检查表单是否有效

$('.article_information_form')[0].checkValidity() // returns true or false

这不会提交您的表单，因此不会刷新页面