douweilei2307
2016-07-10 21:57
浏览 43

没有页面刷新的表单验证

I have a form that needs validation. My form contains four elements, an articleType select box, an articleTitle input box, an articleUrl input box and a numPages select box. My articleType and numPages select boxes need to be required. My articleTitle and articleUrl input boxes need to be both required and have a minlength of 10. My form never refreshes, instead if the input that is inputted is correct it will go on to the next page.

Here's my code:

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);
                        }
                    });
                })

With my current code, it will display the error messages and then go to the next page. How can I make it stay at the current page till the user corrects their mistakes? Also, I know it's more effective for PHP to validate a form, but in this case would it still be better? If so, how can I relay information back to Ajax so error messages can be displayed using PHP?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dsvjw20866 2016-07-10 22:11
    已采纳

    to check if the form is valid or not use this

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

    this wont submit your form, thus wont refresh the page

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题