CODEWITHSUNDEEP
jqueryvalidationmobile
Damian
Damian

Reputation: 1720

jQuery Mobile validation plugin

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?

Upvotes: 0

Views: 3046

Answers (2)

Sean Llon
Sean Llon

Reputation: 29

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

Upvotes: 2

Damian
Damian

Reputation: 1720

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.

Upvotes: 1

Related Questions