jQuery Mobile validation plugin

Question

I've been trying without much success to validate mobile forms using the jQuery validation plugin.

It seems as though the first page I visit that has a form validates ok. Subsequent pages don't validate, unless they have the same fields that were present for validation on the first page.

For example, the first page I visit is the login page. It has 2 fields, email address and password.

The code is:

<body>
<div id="Login" data-role="page">

<script type="text/javascript">
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(){
    if($("form.validate").length > 0){
      $("form.validate").validate({

        rules: {
          email_address: {
            required: true,
            email: true
          },
          password: "required"
        }

      });
    }
  });
</script>

<form name="login" method="post" class="validate">

  <label class="inputLabel" for="login-email-address">Email Address:</label>
  <input type="email" name="email_address" size="18" id="login-email-address" />
  <label class="inputLabel" for="login-password">Password:</label>
  <input type="password" name="password" size="18" id="login-password" />

  <input type="submit" value="Log In" data-icon="lock" data-mini="true" alt="Log In" title=" Log In " />

</form>

</div>
</body>

This validates when I hit the submit button. If I hit the button from the login page to go to the create account page, which has 4 fields - first name, last name, email address & password only the email address and password validate.

The create account page looks like this:

<body>
<div id="CreateAccount" data-role="page">

<script type="text/javascript">
$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(){
    if($("form.validate").length > 0){
      $("form.validate").validate({

        rules: {
          firstname: {
            required: true,
            minlength: 2
          },
          lastname: {
            required: true,
            minlength: 2
          },
          email_address: {
            required: true,
            email: true
          },
          password: "required"
        }

      });
    }
  });
</script>

<form name="create_account" method="post" class="validate">

  <label class="inputLabel" for="create-account-firstname">First Name:</label>
  <input type="text" name="firstname" size = "41" maxlength= "96" id="create-account-firstname" />
  <label class="inputLabel" for="create-account-lastname">Last Name:</label>
  <input type="text" name="lastname" size = "41" maxlength= "96" id="create-account-lastname" />
  <label class="inputLabel" for="create-account-email-address">Email Address:</label>
  <input type="email" name="email_address" size="18" id="create-account-email-address" />
  <label class="inputLabel" for="create-account-password">Password:</label>
  <input type="password" name="password" size="18" id="create-account-password" />
  <input type="submit" value="Submit" data-icon="lock" data-mini="true" alt="Submit" title=" Submit " />

</form>

</div>
</body>

If I hit the submit button on this page, only the email address and password are validated. I'm presuming this is because it is still running the validation rules from the login page rather than the create account page? If I hit the browser refresh, then the submit button all 4 fields are validated.

How can I get the forms validating correctly?

halfer · Accepted Answer · 2018-01-01 22:00:10Z

2

You are right; I had similar experience using software worklight, maybe because of its ajax control and iframe integration.

I suggest creating a globalValidation.js with following code

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(){
    if($("form.validate").length > 0){
      $("form.validate").validate({
        rules: {
          firstname: {
            required: true,
            minlength: 2
          },
          lastname: {
            required: true,
            minlength: 2
          },
          email_address: {
            required: true,
            email: true
          },
          password: "required"
        }
      });
    }
  });

and then , include it in your header as <script src="globalValidation.js " /> before </head>.

edited Jan 1, 2018 at 22:00

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Nov 22, 2012 at 8:01

Sean Llon

292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Damian · Accepted Answer · 2012-07-29 13:50:15Z

1

ok, I think I've got it. I need to give each form a unique class (or ID) rather than giving them all the same class of validate, and reference the new class in the javascript.

answered Jul 29, 2012 at 13:50

Damian

1,7125 gold badges26 silver badges47 bronze badges

1 Comment

Ryley Over a year ago

Exactly... the 2nd one has a unique name already, so you could use $('form[name="create_account"]').validate(...

Collectives™ on Stack Overflow

jQuery Mobile validation plugin

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related