Как проверить эту форму HTML/JavaScript onsubmit?

Мне удалось выяснить, как предупреждать об ошибке, если пароли не совпадают, но это не мешает пользователю полностью отправлять форму. Может кто-нибудь объяснить, как я могу написать заявление, которое проверяет, что все возвращает true, прежде чем разрешить пользователю отправлять форму с помощью функции onsubmit?Как проверить эту форму HTML/JavaScript onsubmit?

Пожалуйста, обратите внимание, что я понимаю, что я не написал функцию под названием validateForm, который отмечается в onsubmit HTML формы, я просто знаю, что это должно быть там, когда я написал эту функцию

Вот ссылка на jsfiddle: http://jsfiddle.net/shanny/VSUM6/28/

А вот код еще раз:

HTML:

<html> 
    <h1>Form Validation</h1> 
    <div id="error"></div> 
    <form name="myForm" action="" method="post" target="_blank" onsubmit="return validateForm()"> 
     First Name: <input type="text" name="firstName" autofocus required > 
     <br /> 
     Last Name: <input type="text" name="lastName" required > 
     <br /> 
     Email: <input id="email" type="email" name="email" placeholder="e.g., [email protected]" required> 
     <br /> 
     Password: <input type="password" name="password1" id="password1" required > 
     <br /> 
     Confirm Password: <input type="password" name="password2" id="password2" required > <p id="error2"></p> 
     <br /><br /> 
     Sex: 
     &nbsp;&nbsp;<input type="radio" name="sex" value="male" >Male 
     &nbsp;<input type="radio" name="sex" value="female">Female 
     <br /><br /> 
     Quantity:<br /> 
     <input name ="scale" type="range" min="1" max="6" step="1" value="1" > 
      <br /> 
      &nbsp;&nbsp;1&nbsp;&nbsp;&nbsp; 2&nbsp;&nbsp;&nbsp; 3&nbsp;&nbsp;&nbsp; 4&nbsp;&nbsp;&nbsp; 5&nbsp;&nbsp;&nbsp; 6 
     <br /><br /> 
     Interests (select all that apply): 
     <br /> 
     <input type="checkbox" class="radio" name="interests" value="running">This 
     <input type="checkbox" class="radio" name="interests" value="swimming">That 
     <input type="checkbox" class="radio" name="interests" value="hiking">Other 
      <br /><br /> 
     <input name="submit" id="submit" type="submit" value="Hayo!"> 
    </form> 
    </html>

JavaScript:

var errorBox=document.getElementById("error"); 
var errorText=document.getElementById("error2"); 
var pass2=document.getElementById("password2"); 
var pass1=document.getElementById("password1"); 

pass2.onchange = function() { 
if (pass2.value !== pass1.value) { 
    pass2.style.border="2px solid red"; 
    errorText.innerHTML="Passwords do not match!"; 
    errorText.style.color="red"; 
    //errorBox.style.height="40px"; 
    //errorBox.style.visibility="visible"; 
    //errorBox.innerHTML="<p>Passwords do not match!</p>"; 
    return false; 
} 
else {   
    pass2.style.border="2px solid #B5DCF7"; 
    errorText.style.color="green"; 
    errorText.innerHTML="Passwords match!"; 
    return true; 
} 
};

источник

2013-09-17 Shannon

Самый простой способ предотвратить поведение по умолчанию в форме submit - вернуть функцию false. Это прекратит отправку формы.

var onSumbitHandler = function(event){ 
    /* validate here */ 
    return false; 
};

Другой (и технически лучше) способ вызвать preventDefault на объекте события, который передается в качестве параметра в вашей onSubmit функции. Единственная проблема в том, что некоторые более старые версии IE не поддерживают этот метод, так что вам нужно, чтобы обеспечить запасной вариант для этого случая: Они кажутся

var onSubmitHandler = function(event){ 
    /* validate here */ 
    if(event.preventDefault) 
     event.preventDefault(); 
    else 
     event.returnValue = false; 
};

источник

2013-09-17 14:24:04 nderscore

Исторически, я использовал следующую идею:

function validateForm() { 
    var errors = 0; 
    var form = document.getElementsByTagName('form')[0]; 

    /* 
    * Store appropriate form elements. 
    * There are many ways to do this, but I'm keeping it 
    * simple for the example 
    */ 
    var firstName = document.getElementById("firstName").value; 
    var lastName = document.getelementById("lastName").value; 
    // etc.. 

    // validate required fields 
    if (firstName === "") { 
    errors++; 
    } 

    if (lastName === "") { 
    errors++; 
    } 

    // etc... 

    return errors === 0; 
}

Вы также можете сделать ошибки более надежными ...

function validateForm() { 
    var errors = []; 
    var form = document.getElementsByTagName('form')[0]; 

    /* 
    * Store appropriate form elements. 
    * There are many ways to do this, but I'm keeping it 
    * simple for the example 
    */ 
    var fnElem = document.getElementById("firstName"); 
    var lnElem = document.getelementById("lastName"); 
    var firstName = fnElem.value; 
    var lastName = lnElem.value; 
    // etc... 

    // validate required fields 
    if (firstName === "") { 
    errors.push({ 
     elem: firstName, 
     message: "First name can't be blank" 
    }); 
    } 

    if (lastName === "") { 
    errors.push({ 
     elem: lastName, 
     message: "Last name can't be blanks" 
    }); 
    } 

    // etc... 

    return errors.length === 0; 
}

Вы могли бы затем цикл через ошибки и сделать что-то полезное.

источник

2013-09-17 14:07:50 mikekavouras

не используют JQuery. – nderscore

Ответ был обновлен. – mikekavouras

Как проверить эту форму HTML/JavaScript onsubmit?

ответ

Смежные вопросы