如何在模態登錄表格中防止默認（）

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事件中的提交事件。這是沒有必要的，因爲你已經綁定到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; 
}