モーダルログインフォームでのデフォルト（）の防止方法

Question

私は、Spring Framework MVCで作業しています。ログインフォームを動作させようとしていますが、私は本当にajaxの初心者です。

ここは私のindex.jspコードです。ここで

<!-- The Modal --> 
 
<div id="modal1" class="modal2"> 
 
    <span onclick="document.getElementById('modal1').style.display = 'none'" class="close" title="Close Modal">&times;</span> 
 

 
<!-- Modal Content --> 
 
<form:form id="login-form" method="POST" commandName="users" class="modal-content2 animate"> 
 
    <div class="imgcontainer"> 
 
     <img src="<c:url value=" /public/images/rsz_default-user.png "/>" alt="Avatar2" class="avatar"> 
 
    </div> 
 
    <div class="container"> 
 
     <p> 
 
     <label id="Correo"><b>Correo</b></label> 
 
     <input name="correo" id="correo" class="form-control" /> 
 
     </p> 
 
     <p> 
 
     <label><b>Password</b></label> 
 
     <input type="password" name="password" id="password" class="form-control" /> 
 
     </p> 
 
     <button type="submit"onclick="submitForm();"class="cyan">Enviar</button> 
 
     <button type="button" onclick="document.getElementById('modal1').style.display = 'none'" class="red">Cancel</button> 
 
     <span class="psw">Olvidaste tu <a href="#">Contraseña?</a></span> 
 
    </div> 
 
    </form:form> 
 

 
</div>

私LoginControllerです：

@RequestMapping(value = "/index.htm", method = RequestMethod.POST) 
 
public @ResponseBody String login(@ModelAttribute("users") Users u,BindingResult result) { 
 
    String returnText; 
 
    this.userValidations.validate(u, result); 
 
    Users user = checkUser(u.getCorreo(), u.getPassword()); 
 
    if ((u.getCorreo().equals(user.getCorreo())) && (u.getPassword().equals(user.getPassword()))) { 
 
    returnText = "¡Bienvenid@ " + user.getNombre() + "!"; 
 
    } else { 
 
    returnText = "Usuario incorrecto"; 
 
    } 
 
    return returnText; 
 
}

、これは、ログインが成功した場合、モーダルフォームを送信するために私のAjaxの機能です。

function submitForm(){ 
 
    $('#login-form').on('submit', function (e) { 
 
     
 
     e.preventDefault(); 
 
     var form = $(this); 
 
     alert("Estoy aca"); 
 
     $.ajax('/index.htm', { 
 
      type: 'POST', 
 
      data: form.serialize(), 
 
      success: function (result) { 
 
       alert("Estoy aca"); 
 
       Materialize.toast(result); 
 
      } 
 
     }); 
 

 
    }); 
 
}

私が提出フォームを正しく完了したときに、ここで私の問題はある期待通りに機能していますが、私は、フォームに間違ったデータを入れた場合、私はにエラーをキャッチする方法がわかりませんリフレッシュせずにモーダルにするか、ページをリダイレクトします。

Answer 1

あなたのコードは間違っています。なぜあなたはonclickイベントのsubmitイベントにバインドしていますか？あなたは既にonclickイベントに結合され、そしてあなたがプログラム的にAJAX呼び出しを実行しているので、それは、あなたの実際の質問に...今、

必要なあなたはどのeventhadler機能に偽を返した場合、イベントがされていませんキャンセル。それを行うには

簡単な方法としては、バリJavaScript関数を作る、そしてバリが満たされない場合はfalseを返すことになる。..

function isEverythingValid(){ 
    var isFormValid = true; 

    //Validate all your form here 

    //for example: 
    if(document.getElementById('someId').value == ""){ 
    isFormValid = isFormValid && false; 
    } 
    return isFormValid ; 
} 

function submitForm(){ 
if(isEverythingValid()){ 
     $.ajax('/index.htm', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function (result) { 
      alert("Estoy aca"); 
      Materialize.toast(result); 
     } 
     }); 
    } 
    else{ 
    return false; 
}