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:


<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>
                            <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>
                            <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>

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


<script type="text/javascript">

        //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) {
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {
                           numPages = $('#numPages option:selected').val();

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

    打赏 评论

相关推荐 更多相似问题