2017-09-27 1 views
-5

フォームにjQueryの検証があり、すべてのフィールドが正しく入力されていればtrueまたはfalseを返す関数を作成しました。私の問題は、私の関数がfalseを返す場合、どのように関数を使ってフォームが送信されないようにするかです。jQueryによるフォームの保護

ありがとうございます。これは、すべてのフィールドが正しく満たされた場合、私がチェックするために作った機能(基本的なもの)である

---編集---:

$("#btn_create").click(function(){ 
 

 
    $("input").each(function(){ 
 
    if($(this).css("border-color") == "rgb(249, 57, 57)"){ 
 
     check = false; 
 
     return false; 
 
    } else { 
 
     check = true; 
 
    } 
 
    }); 
 

 
    if(check == false){ 
 
    $("#fill").fadeIn("slow"); 
 
    } else { 
 
    $("#fill").fadeOut("slow"); 
 
    } 
 
});
<form method="post" class="create"> 
 
    <div class="form-group col-lg-12"> 
 
    <input type="text" class="form-control" id="name" placeholder="Name"> 
 
    </div> 
 

 
    <div class="form-group col-lg-12"> 
 
    <input type="email" class="form-control" id="email" placeholder="E-mail"> 
 
    </div> 
 

 
    <div class="form-row"> 
 
    <div class="form-group col-lg-6"> 
 
     <input type="password" class="form-control" id="pass" placeholder="Password"> 
 
    </div> 
 
    <div class="form-group col-lg-6"> 
 
     <input type="password" class="form-control" id="repass" placeholder="Retype Password"> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group col-lg-12"> 
 
    <input type="text" class="form-control" id="tlm" minlength="9" maxlength="9" placeholder="Contact"> 
 
    </div> 
 

 
    <div class="form-group col-lg-12"> 
 
    <label class="label label-danger" id="fill">Please, fill all fields correctly!</label> 
 
    </div> 
 

 
    <div class="form-group col-lg-12 text-right"> 
 
    <button type="submit" id="btn_create" class="btn btn-primary">Sign in</button> 
 
    </div> 
 
</form>

フィールドが正しく塗りつぶされていない場合、境界線の色は赤です。境界線の色が赤色である場合は、check = falseと入力されます。

PS:この質問をする前に、私はデフォルトを防ぐなどの答えを求めてきました。私はそれを試して何らかの理由で重複しているとは言わないでください。

+2

コードでお知らせください。 –

+0

フォームフィールドが空のときにフォームを送信するボタンを無効にするだけで済みます。はい、コードを提出してください。 –

+3

[Submit Form Default jQueryの既定の防止](https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery) – Thusitha

答えて

0

$('#test').on('submit', function(e) { 
 
    e.preventDefault(); 
 
    // do your custom stuffs and make a ajax call to submit it manually as per you requirement. 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="test" method="POST"> 
 
    <input type="text" placeholder="Enter something" /> 
 
    <button>Submit</button> 
 
</form>

それが動作するはずです、このコードを試してみてください。

関連する問題