他のdivを表示した後に投稿をクリックしたときにチェック入力が空でない

Question

jqueryが新しく、入力フォームが4つあります。送信ボタンでは、必須フィールドをチェックする必要があります。 必須のフィールドを確認した後、別のdivが表示されます。私は、htmlの& jqueryコードを貼り付けています。 Pls hekp私はこれを解決する。事前に

おかげ

<form class="login-form"> 
    <div class="form-group"> 
                   <label>Email</label> 
<input type="email" class="form-control" required="required"> 
    </div> 
<div class="form-group"> 
<label>Mobile Number</label> 
    <input type="text" class="form-control" required="required"> 
</div> 
<div class="form-group"> 
                   <label>Password</label> 
<input type="password" class="form-control" required="required"> 
</div> 
<div class="form-group"> 
<label>Confirm Password</label> 
<input type="password" class="form-control" required="required"> 
    </div> 
    <div class="forgot-password-text highlight-text bl"> 
    Already have an account? Back to Login 
    </div> 
    <button class="btn btn-primary form-control createac" type="submit" id="signupbtn">Sign Up</button> 
    </form> 

私のjqueryの

$('#signupbtn').click(function() { 

    if ($('.signupform').find(':input').length > 0) { 

     return; 
    } 


    $('.login-translate-container').css("transform", "translateX(-720px)"); 
}) 

Answer 1

変更]ボタン」にタイプボタン：次に

<button class="btn btn-primary form-control createac" type="button" id="signupbtn">Sign Up</button> 

：

$('#signupbtn').click(function() { 

    $('input').each(function() { 
    if(!$(this).val()) { 
     alert('Some fields are empty'); 
     return false; 
    } 
    }); 

    $(".signupform").submit(function() { 
    $('.login-translate-container').css("transform", "translateX(-720px)");  
    }); 

}); 

Answer 2

以下の解決策をご確認ください。私はあなたがこれはあなたが、それはあなたのために働くいない場合、私に教えてください役立ちます

$(document).ready(function(e) { 
 
    $("#loginForm").submit(function(e) { 
 
     e.preventDefault(); 
 
    }).validate({ 
 
     rules: { 
 
      mobile: { 
 
       required: true, 
 
       minlength: 10 
 
      }, 
 
      password: { 
 
       required: true, 
 
       minlength: 5 
 
      }, 
 
      confirm_password: { 
 
       required: true, 
 
       minlength: 5, 
 
       equalTo: "#password" 
 
      }, 
 
      email: { 
 
       required: true, 
 
       email: true 
 
      } 
 
     }, 
 
     messages: { 
 
      mobile: "Please enter mobile number", 
 
      password: { 
 
       required: "Please provide a password", 
 
       minlength: "Your password must be at least 5 characters long" 
 
      }, 
 
      confirm_password: { 
 
       required: "Please provide a password", 
 
       minlength: "Your password must be at least 5 characters long", 
 
       equalTo: "Please enter the same password as above" 
 
      }, 
 
      email: "Please enter a valid email address" 
 
     }, 
 
     submitHandler: function(form) { 
 
      var $form = $(form); 
 
      var $inputs = $form.find("input, select, button, textarea"); 
 
      var serializedData = $form.serialize(); 
 
      console.log(serializedData); 
 
      $inputs.prop("disabled", true); 
 
      $('.login-form').slideUp('fast'); 
 
      $('#anotherDiv').slideDown('slow').removeClass('hidden'); 
 
     } 
 
    }); 
 
});

.hidden{ 
 
display:none; 
 
} 
 

 
.error{color:red;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<form id="loginForm" class="login-form"> 
 
    <div class="form-group"> 
 
     <label>Email</label> 
 
     <input type="email" class="form-control" id="email" name="email" required> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>Mobile Number</label> 
 
     <input type="text" name="mobile" id="mobile" class="form-control" required> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>Password</label> 
 
     <input type="password" name="password" id="password" class="form-control" required> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label>Confirm Password</label> 
 
     <input type="password" name="confirm_password" id="confirm_password" class="form-control" required> 
 
    </div> 
 
    <div class="forgot-password-text highlight-text bl"> 
 
     Already have an account? Back to Login 
 
    </div> 
 
    <input type="submit" class="btn btn-primary form-control createac" id="signupbtn" value="Sign Up" /> 
 
</form> 
 

 
<div id="anotherDiv" class="hidden"> Another Div after submit</div>

jQueryの検証プラグインを使用することをお勧めします。