'jQuery Mobile submission not instantly recognized as submit action on ajax

I have a jQuery Mobile registration form, with validation plugin.

<!doctype html>
<html>
<head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Include jQuery Mobile stylesheets -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Include the jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- Include the jQuery Mobile library -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
 <style>
 label.error {
     float: none;
     color: red;
     font-size: 16px;
     font-weight: normal;
     line-height: 1.4;
     margin-top: 0.5em;
     width: 100%;
     display: block;
     margin-left: 22%;
 }
 </style>
<title>Registrasi</title>

</head>
<body>

<div data-role="page" data-theme="c" id="registerpage">
    <div data-role="header" id="headerMain" name="headerMain">
      <h2>Registrasi</h2>
    </div>

  <div data-role="content">
    <form name="frmCreate" id="frmCreate">
    <div id="usernamediv" data-role="fieldcontain" class="ui-field-contain">
      <label for="username">Username:</label>
      <input id="username" name="username" type="text"  class="ui-input-text required" />
    </div>

    <div id="namediv" data-role="fieldcontain" class="ui-field-contain">
      <label for="name">Name:</label>
      <input id="name" name="name" type="text" class="ui-input-text required" />
    </div>

    <div id="emaildiv" data-role="fieldcontain" class="ui-field-contain">
      <label for="email">email:</label>
      <input id="email" name="email" type="email"  class="ui-input-text required email"/>
    </div>

    <div id="passworddiv" data-role="fieldcontain" class="ui-field-contain">
      <label for="password">Password:</label>
      <input id="password" name="password" type="password"  class="ui-input-text required" />
    </div>

    <div id="passwordagaindiv" data-role="fieldcontain" class="ui-field-contain">
      <label for="passwordagain">Password lagi:</label>
      <input id="passwordagain" name="passwordagain" type="password"  class="ui-input-text required" />

    </div>

    <button id="btnRegister" name="btnRegister" id="btnRegister" class="ui-btn btn btn-primary" data-role="button" data-corners="false">
      Register
    </button>
    </form>

  </div>



  <div data-role="footer"  data-position="fixed" >
    <h2>footer</h2>
  </div>

</div>

<!-- some other html //-->

</body>
</html>
<script>
$(document).ready(function() {

  $("#frmCreate").validate({
    rules: {
        username: {
          required: true,
          minlength: 5,
        },
        name: {
          required: true,
          minlength: 3,
        },
        email: {
          required : true,
          email: true,
        },
        password: {
          required: true,
          minlength: 6,
        },
        passwordagain: {
          required: true,
          equalTo: "#password",
        }
    },
    messages: {
        username: {
            required: "harus diisi",
            minlength: "minimal 5 karakter",
        },
        name: {
            required: "harus diisi",
            minlength: "minimal 3 karakter",
        },
        email:{
            required: "harus diisi",
            email: "harus berformat email"
        },
        password: {
            required:  "harus diisi",
            minlength: "minimal 6 karakter",
        },
        passwordagain: {
            required: "harus diisi",
            equalTo: "harus sama dengan password",
        }

    },
    errorClass: "error",
    submitHandler: function(form) {
      alert("y");
      $("form").submit(function (event) {
        $.mobile.loading("show");
        alert('x');
        event.preventDefault();


        var formData = {
            username: $("#username").val(),
            name:     $("#name").val(),
            email:    $("#email").val(),
            password: $("#password").val(),
        };


        $.ajax({
          type:   "POST",
          url:    "http://localhost:8080/api/user",
          data:   formData,
          dataType: "json",
          encode:   true,
          async: false,
            }).done(function (data) {
              console.log(data);
              $.mobile.loading("hide");
              
            })
            .fail(  function (jqXHR, status, error) {
                console.log(jqXHR.responseText);
                $.mobile.loading("hide");
                
            });


      });
    }

  });



});

</script>

if I click on the submit button btnRegister it doesn't automatically submit. when i pressed the button for the second time, then it will submit.

i debug it with an alert('y') and alert('x') then how i know that the first click on the button does not trigger the submit action.

any idea how to fix this?

thank you

jqueryajaxbuttonjquery-mobilesubmit


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions