Сначала проверьте ошибки перед отправкой

Question

У меня есть форма, которую я хочу, чтобы она была проверена и проверена блоком try-catch плюс две другие функции. Вот что у меня есть: HTML:

<h5>Please enter your name below</h5> 

<form name="textForm"> 
    <label for="name">First name:</label> 
    <input type="text" name="fname" id="name"> 
</form> 

<h5>Please enter your e-mail below</h5> 

<form name="mailForm"> 
    <label for="email">Email:</label> 
    <input type="email" name="email" id="email"> 
</form> 
    <form action=""> 
<label for="height">Your height:</label> 
<input type="text" placeholder="in centimetres" name="personHeight" id="height" /> 
<br></br> 
<input formaction="mailto:test@gmail.com" onclick="heightCheck();validateTextForm();validateMailForm();" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" /> 
<br></br> 
<p id="mess"></p> 
    </form> 

JS:

function validateTextForm() { 
    var x = document.forms["textForm"]["fname"].value; 
    if (x == null || x == "") { 
     alert("First name must be filled out"); 
     return false; 
    } 
} 

function validateMailForm() { 
    var z = document.forms["mailForm"]["email"].value; 
    var atpos = z.indexOf("@"); 
    var dotpos = z.lastIndexOf("."); 
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 
} 

function heightCheck() { 
    try { 
     var x = document.getElementById("height").value;  
     if (x == "")    
     throw "enter your height";  
     if (isNaN(x)) throw "not a number"; 
     if (x > 250)     
     throw "height is too high"; 
     if (x < 80)      
     throw "height is too low";  
    } catch (err) { 
     var y = document.getElementById("mess"); 
     y.innerHTML = "Error: " + err + ".";  
    } 
} 

Дело в том, что я хочу, чтобы это произошло заключается в следующем: Во-первых, он делает проверку формы, но после чего, если это правильно, подает также. Я попытался сначала проверить формы, прежде чем отправлять, но без каких-либо успехов. При просмотре я узнаю, что это можно сделать либо stopPropaganation, preventDefault, либо return false методов, но до сих пор не знаю, как это сделать. Я расскажу о парнях, которые мне помогают. Заранее спасибо! Fiddle: Однако в скрипке он не работает должным образом, как он должен: http://jsfiddle.net/5T9sJ/

Answer 1

Вы должны изменить свой код в соответствии с моими изданиями:

... 
<input formaction="mailto:test@gmail.com" type="submit" value="Submit all" id="submit" method="post" formtarget="_blank" /> 
... 

Затем сделайте processValidate метод, чтобы обернуть все другие валидации в него :

$(document).ready(function() { 
    $('input#submit').click(function (e) { 
     e.preventDefault(); 
     validateTextForm(); 
     validateMailForm(); 
     heightCheck(); 
    }); 

    function validateTextForm() { 
     var x = document.forms["textForm"]["fname"].value; 
     if (x === null || x === "") { 
      alert("First name must be filled out"); 
      return false; 
     } 
    } 

    function validateMailForm() { 
     var z = document.forms["mailForm"]["email"].value; 
     var atpos = z.indexOf("@"); 
     var dotpos = z.lastIndexOf("."); 
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= z.length) { 
      alert("Not a valid e-mail address"); 
      return false; 
     } 
    } 

    function heightCheck() { 
     try { 
      var x = document.getElementById("height").value; 
      if (x === "") throw "enter your height"; 
      if (isNaN(x)) throw "not a number"; 
      if (x > 250) throw "height is too high"; 
      if (x < 80) throw "height is too low"; 
     } catch (err) { 
      var y = document.getElementById("mess"); 
      y.innerHTML = "Error: " + err + "."; 
     } 
    } 

}); 

Объяснение:

У вас есть несколько методов, связанных с submit тип ввода, поэтому нажатие на него всегда будет вызывать отправку формы.

Я добавил обработчик jQuery click для этого действия, чтобы предотвратить действие кнопки отправки по умолчанию.

думаю e.preventDefault() костюмы здесь лучший.

РАБОТА DEMO:http://jsfiddle.net/rbegf/