after postback, jquery does not validate controls and allows submitting

Question

I'm validating a form using the JQuery validation plugin.

The very first time the page loads, the form is validated perfectly and only submits once all fields have been completed. The form then posts back to itself and when trying to enter details again, the validation does not work but still allows to submit and the data gets successfully sent to the database.

Here is my code:

<form id="formSubmit" method="post" action="post to this page">


<fieldset data-role="fieldcontain">
            <p>
                <label for="clubSelect">Preferred Club</label>                  
                <select id="clubSelect" name="clubSelect" class="required">
                    <option value="000">Select a Club</option>
                    <?php if ($db->num_rows > 0)
                        {
                            foreach($results as $result)
                            {
                    ?>
                    <option value="<?php echo $result->id;?>"><?php echo $result->name;?></option>
                    <?php 
                            }
                        }
                    ?>
                </select>
                </fieldset>
            <fieldset data-role="fieldcontain">
                <label for="txtName">Name</label>
                <input type="text" id="txtName" name="txtName" class="required"/>
            </fieldset>
            <fieldset data-role="fieldcontain">
                <label for="txtEmail">Email</label>
                <input type="text" id="txtEmail" name="txtEmail" class="required email" minlength="5"/>
                    </fieldset>
                    <fieldset data-role="fieldcontain">
                <label for="txtCell">Contact Number</label>
                <input type="tel" id="txtCell" name="txtCell" class="required"/>
            </fieldset>
            <fieldset data-role="fieldcontain">
                <input type="submit" name="submit" value="Submit"/>

            </fieldset>
        </form>
<script>
$(document).ready(function () {
  $("#formSubmit").validate({
      rules: {
          clubSelect: {
              selectcheck: true
          },
          txtName: {
              required: true
          },
          txtEmail: {
              required: true
          },
          txtCell: {
              required: true,
              number: true
          }
      },
      messages: {
          txtName: {
              required: "Please enter your name."
          },
          txtEmail: {
              required: "Please enter your email address."
          },
          txtCell: {
              required: "Please enter your contact number.",
              number: "Only numbers are allowed."
          }
      }
  });
  jQuery.validator.addMethod('selectcheck', function (value) {
      return (value != '000');
  }, "Please select a club.");
});
</script>

Basically what I am asking is how to make sure that the validation always works. Thanks

because you're using `ready` which shouldn't be used with jQM and that it fires only once! Bind it to `$('#pagID').on('pageshow', function () {` — Omar, Jul 26 '13 at 09:37
As a sidenote: You should ALWAYS validate your data on the server side. — Valentin D, Jul 26 '13 at 09:39

score 5 · Accepted Answer · edited May 23 '17 at 12:29

5

Replace

$(document).ready(function ()

with

$('#pagID').on('pageshow', function () {

Update: Also, add data-ajax=false to the form div, to avoid posting data using Ajax.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 26 '13 at 09:38

Omar

32,302
9
69
112

changing the code to $("#formSubmit").on('pageshow',function(){ causes the validation not to work at all. – Zubair Jul 26 '13 at 09:49
`#formSubmit` should be page's id not the form's. because `pageshow` or `pagebeforeshow` are meant ti listen to pages. – Omar Jul 26 '13 at 09:52
I did some more testing and it turns out that the first time, validation works, the second time, it doesn't work, but from the third time onwards it continues to work. Any idea as to what might be causing this behaviour? – Zubair Jul 26 '13 at 10:04
@user1765932 when the form is submitted, you go to another page and then get back to the same page? – Omar Jul 26 '13 at 10:05
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34215/discussion-between-omar-and-user1765932) – Omar Jul 26 '13 at 10:07

after postback, jquery does not validate controls and allows submitting

1 Answers1