フォームの検証後のリダイレクト

Question

jQueryがフォームの検証を完了すると、成功ページにリダイレクトするフォームがあります。

私は間違っていますか？

$("#submit").click(function() { 
 
    if ($("#employeeID").val() == "") { 
 
    $("#message1").html("Employee ID can't be null"); 
 
    } 
 
    if ($("#password").val() == "") { 
 
    $("#message2").html("Password can't be null"); 
 
    } 
 

 
});

<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> 
 
<form name="loginform" method="post" class="login-form"> 
 
    <div class="form-group"> 
 
    <label for="employeeID">EmployeeID</label><input type="text" name="employeeID" id="employeeID" placeholder="employeeID" class="form-control" /><span id="message1"></span><br> 
 
    <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="password" class="form-control" /><span id="message2"></span><br> 
 
    <input type="submit" id="submit" value="Login" /> 
 
    <p class="message">Not registered? <a href="/validationSpringMVC/createAccount.html">Create an account</a></p> 
 
    </div> 
 

 
</form>

Answer 1

jQueryの成功のページへ

window.location.replace("https://www.websitename.com/success-page"); //this is just a example 

Answer 2

をリダイレクトするには、以下のフォーム検証の使用を完了するたびに、このような何か行うことができます：それは良いです

<script type="text/javascript"> 

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

     if($("#employeeID").val()== ""){ 
     $("#message1").html("Employee ID can't be null"); 
     return false; 
     } 

     if($("#password").val()== ""){ 
     $("#message2").html("Password can't be null"); 
     return false; 
     } 
     window.location.replace("https://yourdomain/successpage"); 
    }); 
</script> 

Answer 3

を処理するonsubmit ev代わりに、送信ボタンをクリックしてください。フォームの引数actionの中に成功ページのURLを設定できます。サブミットイベントハンドラがfalseを返した場合、サブミットアクションはキャンセルされます。さもなければ要求は指定されたURLに送られます。

$("form").submit(function() { 
 
    var hasError = false; 
 
    $(".has-error, .has-success").removeClass("has-error").removeClass("has-success"); 
 
    if ($("#employeeID").val() == "") { 
 
    $("#employeeID").closest(".form-group").addClass("has-error"); 
 
    hasError = true; 
 
    } else { 
 
    $("#employeeID").closest(".form-group").addClass("has-success"); 
 
    } 
 
    if ($("#password").val() == "") { 
 
    $("#password").closest(".form-group").addClass("has-error"); 
 
    hasError = true; 
 
    } else { 
 
    $("#password").closest(".form-group").addClass("has-success"); 
 
    } 
 
    return !hasError; 
 
});

.form-group:not(.has-error) .error-message { 
 
    display: none !important; 
 
}

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

 
<form name="loginform" method="post" class="login-form" action="https://stackoverflow.com/users/9108771/yuvaraj-pn"> 
 
    <div class="form-group"> 
 
    <label for="employeeID">EmployeeID</label> 
 
    <input class="form-control" type="text" name="employeeID" id="employeeID" placeholder="employeeID" class="form-control" /> 
 
    <span id="message1" class="help-block error-message">Employee ID can't be null</span> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="password">Password</label> 
 
    <input class="form-control" type="password" name="password" id="password" placeholder="password" class="form-control" /> 
 
    <span id="message2" class="help-block error-message">Password can't be null</span> 
 
    </div> 
 
    <input class="btn btn-primary" type="submit" value="Login" /> 
 
    <p class="message">Not registered? <a href="/validationSpringMVC/createAccount.html">Create an account</a></p> 
 
</form>

も.submit()方法のマニュアルを参照してください。

あなたのHTMLも修正しました。上記のコードでは、フォーム送信イベントのハンドラは、フォームコントロールのvalidation statesを入力値に応じて適用します。エラーメッセージの可視性は、追加のCSSルールによって制御されます。ハンドラは、入力の1つでも空であれば送信を禁止します。