2009-05-08 6 views
2

Я работаю над скриптом проверки формы на работе и испытываю некоторые трудности. Форма предназначена для того, чтобы убедиться, что пользователь заполнил имя, электронную почту реального времени, категорию (оттуда выпадал) и вопрос:inline проверка формы javascript

Это название формы и собирает все данные из формы :

<script> 

    function checkForm(form1) { 
name = document.getElementById("FieldData0").value; 
category = document.getElementById("FieldData3").value; 
question = document.getElementById("FieldData1").value; 
email = document.getElementById("FieldData2").value; 

Это проверяет, что что-то находится в поле «имя». Он отлично работает и проверяет точно так, как должен, отображая текст ошибки:

if (name == "") { 
    hideAllErrors(); 
document.getElementById("nameError").style.display = "inline"; 
document.getElementById("FieldData0").select(); 
document.getElementById("FieldData0").focus(); 
    return false; 

Это также работает так, как должно. Он проверяет, является ли поле электронной почты пусто, и если он пуст, отображается текст ошибки и выбирает это поле:

} else if (email == "") { 
hideAllErrors(); 
document.getElementById("emailError").style.display = "inline"; 
document.getElementById("FieldData2").select(); 
document.getElementById("FieldData2").focus(); 
    return false; 
    } 

Это также работает точно так же, как и должно быть, убеждается, что поле вопросов не пусто:

else if (question == "") { 
hideAllErrors(); 
document.getElementById("questionError").style.display = "inline"; 
document.getElementById("FieldData1").select(); 
document.getElementById("FieldData1").focus(); 
    return false; 
    } 

Это один работает частично - Если не выпадающий не выбран, то будет выведено сообщение об ошибке, но это не останавливает форму от представления, он просто выводит текст сообщения об ошибке в то время как форма представляет:

else if (category == "") { 
hideAllErrors(); 
document.getElementById("categoryError").style.display = "inline"; 
document.getElementById("FieldData3").select(); 
document.getElementById("FieldData3").focus(); 
    return false; 
    } 

Это не работает вообще, где бы я ни выразился. На прошлой неделе я использовал вариант на том же скрипте, и он отлично работал. Это, как предполагается, чтобы проверить, что электронная почта вошла выглядит как реальный адрес электронной почты:

else if (!check_email(document.getElementById("FieldData1").value)) { 
hideAllErrors(); 
document.getElementById("emailError2").style.display = "inline"; 
document.getElementById("FieldData2").select(); 
document.getElementById("FieldData2").focus(); 
    return false; 
    } 

Otherwise it lets the form submit: 


    return true; 
    } 

Это проверяет электронную почту из:

function check_email(e) { 
ok = "1234567890qwertyuiop[][email protected]_QWERTYUIOPASDFGHJKLZXCVBNM"; 

for(i=0; i < e.length ;i++){ 
if(ok.indexOf(e.charAt(i))<0){ 
return (false); 
} 
} 

if (document.images) { 
re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/; 
re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
if (!e.match(re) && e.match(re_two)) { 
return (-1);   
} 

} 

} 

Эта функция скрывает все ошибки, так что пользователь не бомбардировали с красным текстом. Я пытался поставить в "document.getElementById (" emailError ") ни "", но это не разрушает все это style.display =.":

function hideAllErrors() { 
document.getElementById("nameError").style.display = "none" 
document.getElementById("emailError").style.display = "none" 
document.getElementById("categoryError").style.display = "none" 
document.getElementById("questionError").style.display = "none" 

    } 


</script> 

И форма выглядит следующим образом:

<form onSubmit="return checkForm();" method="post" action="http://www.emailmeform.com/fid.php?formid=303341io4u" name="form1"> 

<p><div class=error id=nameError>Required: Please enter your name<br/></div><p><strong>Name:</strong> <span></span><br><input type="text" name="FieldData0" id="FieldData0" value="" size="22" tabindex="1" /> 
<label for="name"></label></p> 

<p><div class=error id=emailError>Required: Please enter your email address<br/></div> 
<div class=error id=nameError2>This doesn't look like a real email address, please check and reenter<br/></div> 
<strong><p>Email:</strong> <span>(will not be published)</span><br><input type="text" name="FieldData2" id="FieldData2" value="" size="22" tabindex="2" /> 
<label for="email"></label> 
</p> 

<div class=error id=categoryError>Please select a category from the drop-down menu<br></div> 
<p><strong>Category:</strong> <span></span><br> 
<p><select id="FieldData3" name="FieldData3"> 
<option value="">Please select a category</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
<option value="d">d</option> 
<option value="e">e</option> 
<option value="f">f</option> 
<option value="other">Other</option> 
</select><label for="category"></label> 

<p><div class=error id=questionError>Please type your question in the box below:<br></div><label for="question"><strong><p>Your Question:</strong> <span></span></label><br> 

<textarea name="FieldData1" id="FieldData1" cols="50" rows="10"></textarea></p> 

<p><input type="submit" class="btn" value="Submit Question" name="Submit"></p> 
</div> 
</form> 

Проблема в том, что я запускаю проверки? Я не могу понять этого. Любая помощь будет оценена по достоинству.

ответ

5

Я взял на себя смелость переписать ваш javascript, чтобы сделать его более читаемым и более легким для отладки.

Как отметил Марк Бернье, выпадающий элемент не поддерживает функцию select, поэтому я помещаю в нее заявление if, чтобы предотвратить исключение. Я также упростил вашу функцию checkEmail, она казалась довольно запутанной. Я переименовал его в isAnInvalidEmail, чтобы сделать код checkForm проще.

Вы также неправильно назвали 'emailError2' div в своем HTML-коде, что вызовет другое исключение в javascript. Ваш HTML довольно грязный и в некоторых случаях недействителен. Отсутствуют кавычки для некоторых значений атрибутов и отсутствующих конечных тегов. Вы должны рассмотреть возможность использования W3C validator, чтобы гарантировать, что ваш HTML чистый и соответствует стандартам.

Я принимал код на jsbin: http://jsbin.com/iyeco (редактируемые через http://jsbin.com/iyeco/edit)

Вот очищены Javascript:

function checkForm() { 
    hideAllErrors(); 
    var formIsValid = 
    showErrorAndFocusIf('FieldData0', isEmpty, 'nameError') 
    && showErrorAndFocusIf('FieldData2', isEmpty, 'emailError') 
    && showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2') 
    && showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError') 
    && showErrorAndFocusIf('FieldData1', isEmpty, 'questionError'); 

    /* For debugging, lets prevent the form from submitting. */ 
    if (formIsValid) { 
    alert("Valid form!"); 
    return false; 
    } 

    return formIsValid; 
} 

function showErrorAndFocusIf(fieldId, predicate, errorId) { 
    var field = document.getElementById(fieldId); 
    if (predicate(field)) { 
    document.getElementById(errorId).style.display = 'inline'; 
    if (field.select) { 
     field.select(); 
    } 
    field.focus(); 
    return false; 
    } 

    return true; 
} 

function isEmpty(field) { 
    return field.value == ''; 
} 

function isAnInvalidEmail(field) { 
    var email = field.value; 

    var ok = "1234567890qwertyuiop[][email protected]_QWERTYUIOPASDFGHJKLZXCVBNM"; 

    for(i = 0; i < email.length; i++){ 
    if(ok.indexOf(email.charAt(i)) < 0) { 
     return true; 
    } 
    } 

    re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/; 
    re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
    return re.test(email) || !re_two.test(email); 
} 



function hideAllErrors() { 
    document.getElementById("nameError").style.display = "none" 
    document.getElementById("emailError").style.display = "none" 
    document.getElementById("emailError2").style.display = "none" 
    document.getElementById("categoryError").style.display = "none" 
    document.getElementById("questionError").style.display = "none" 
} 

И очищены HTML:

<form onSubmit="return checkForm();" method="post" action="http://www.emailmeform.com/fid.php?formid=303341io4u" name="form1"> 
    <div> 
    <div class="error" id="nameError"> 
     Required: Please enter your name 
    </div> 
    <label for="FieldData0"><strong>Name:</strong></label> 
    <input type="text" name="FieldData0" id="FieldData0" value="" size="22" tabindex="1" /> 
    </div> 

    <div> 
    <div class="error" id="emailError"> 
     Required: Please enter your email address 
    </div> 
    <div class="error" id="emailError2"> 
     This doesn't look like a real email address, please check and reenter 
    </div> 
    <label for="FieldData2"><strong>Email:</strong>(will not be published)</label> 
    <input type="text" name="FieldData2" id="FieldData2" value="" size="22" tabindex="2" /> 
    </div> 

    <div> 
    <div class="error" id="categoryError"> 
     Please select a category from the drop-down menu 
    </div> 
    <label for="FieldData3"><strong>Category:</strong></label> 
    <select id="FieldData3" name="FieldData3"> 
     <option value="">Please select a category</option> 
     <option value="a">a</option> 
     <option value="b">b</option> 
     <option value="c">c</option> 
     <option value="d">d</option> 
     <option value="e">e</option> 
     <option value="f">f</option> 
     <option value="other">Other</option> 
    </select> 
    </div> 

    <div> 
    <div class="error" id="questionError"> 
     Please type your question in the box below: 
    </div> 
    <label for="FieldData1"><strong>Your Question:</strong></label> 
    <textarea name="FieldData1" id="FieldData1" cols="50" rows="10"></textarea> 
    </div> 

    <input type="submit" class="btn" value="Submit Question" name="Submit"> 
</form> 
+0

Благодарим вас за такой тщательный ответ. Я приму ваш совет. –

+0

Добро пожаловать. Счастливое кодирование! – brianpeiris

0

Первая проблема: переместите содержимое этого оператора if в функцию ... затем оттуда. У вас около 5 штук кода, делающих по существу одно и то же.

Далее: поскольку вы разрешаете только одно сообщение об ошибке за один раз, создайте общий div, чтобы удерживать его и просто перемещать вещь. Таким образом, вам не нужно отслеживать скрытие определенных ошибок, отображение других и т. Д.

Далее: возвращает только true или false из вашей функции check_email ... возвращает -1 и false и т. Д. Является плохой формой хотя javascript снисходит к таким вещам.

После того, как вы очистили свой код, его будет намного легче отлаживать.

0

Я бы порекомендовал избавиться от цельной цепочки if else и проверить каждый по отдельности этим.

var error = 0; 
if (value == '') { 
    error = 1; 
    // other stuff; 
} 

if (value2 == '') { 
    error = 1; 
    // do stuff; 
} 

... 

if (error) { 
    // show error 
} else { 
    // submit form 
} 
+0

почему ошибка = 1 | 0? когда-либо слышал об истине | ложь? – roryf

+0

Это не намного лучше, чем текущий код, все равно будет много дублирования. – brianpeiris

+0

Вот что я думал, это похоже на 6 из полудюжины другого. Благодарю за помощь. –

0

Попробуйте заменить == для ===, не приведение типа. Это может помочь вам с проблемой выпадающего списка.

Ваша функция возвращает false и может также возвращать -1.

Как я не знаю, что литая тип делает с !-1 вы должны также сделать JavaScript это:

check_email(...)!==false; 

Вместо этого:

!check_email(...) 
1

Что касается ошибки на раскрывающемся меню, не называть эту строку:

document.getElementById ("FieldData1"). select();

Кажется, что я вспомнил о той же проблеме несколько недель назад.

+0

Вы правы, за исключением раскрывающегося идентификатора «FieldData3». – brianpeiris

+0

Да, я пытался обработать его, как будто это было обычное текстовое поле. Виноват. –