2013-04-15 3 views
1

бит noob с подтверждением формы. Я пытаюсь получить эту форму для проверки в необходимых полях, и что-то не так. Вот что я работаю с:форма не подтверждается - javascript

HTML:

<form action="../visit/thankyou.html" method="post" id="vsurvey"> 
    <input type="hidden" name="id" value="503" /> 
    <fieldset> 
     <legend>Group and Coordinator Information</legend> 
     <label><span>Group Leader Name<span style="color:#cc2d30">*</span></span> 
      <input type="text" name="question_8149" /> 
     </label> 
     <label><span>Email<span style="color:#cc2d30">*</span></span> 
      <input type="text" name="question_8155" /> 
     </label> 
     <label><span>Phone<span style="color:#cc2d30">*</span></span> 
      <input type="text" name="question_8156" /> 
     </label> 
     <label><span>School/Organization<span style="color:#cc2d30">*</span></span> 
      <input type="text" name="question_8159" /> 
     </label> 
     <label><span>Program</span> 
      <input type="text" name="question_8180" /> 
     </label> 
     <label><span>Grade(s)</span> 
      <input type="text" name="question_8181" /> 
     </label> 
     <label><span>Number of Participants<span style="color:#cc2d30">*</span></span> 
      <input type="text" name="question_8182" /> 
     </label> 
    </fieldset> 
    <fieldset> 
     <label><span>Preferred Date<span style="color:#cc2d30">*</span></span> 
      <input class="date" type="text" id="question_8185" name="question_8185" /> 
     </label> 
     <label><span>Second Preference Date<span style="color:#cc2d30">*</span></span> 
      <input class="date" type="text" id="question_8186" name="question_8186" /> 
     </label> 
     <label><span>Third Preference Date<span style="color:#cc2d30">*</span></span> 
      <input class="date" type="text" id="question_8187" name="question_8187" /> 
     </label> 
     <label>Special Accommodations 
      <input type="text" name="question_8174" /> 
     </label> 
    </fieldset> 
    <label>What is the purpose or desired outcome of this visit? 
     <textarea name="question_13026"></textarea> 
    </label> 
    <label>How did you learn about our Group Visit Program? 
     <textarea name="question_8176"></textarea> 
    </label> 
    <label>Comments 
     <textarea name="question_8184"></textarea> 
    </label> 
    <input type="submit" id="sbutton" value="Submit Request" /> 
</form> 

ЯШ:

function validateForm() { 
    var x = document.forms["vsurvey"]["question_8149"].value; 
    if (x == null || x == "") { 
     alert("Please fill in the Group Leader's name."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8155"].value; 
    if (x == null || x == "") { 
     alert("Please fill in the email field."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8156"].value; 
    if (x == null || x == "") { 
     alert("Please fill in the phone field."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8159"].value; 
    if (x == null || x == "") { 
     alert("Please fill in the School/Organization field."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8182"].value; 
    if (x == null || x == "") { 
     alert("Please indicate the number or participants."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8185"].value; 
    if (x == null || x == "") { 
     alert("Please enter your preferred date."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8186"].value; 
    if (x == null || x == "") { 
     alert("Please enter your second date preference."); 
     return false; 
    } 

    var x = document.forms["vsurvey"]["question_8187"].value; 
    if (x == null || x == "") { 
     alert("Please enter your third date preference."); 
     return false; 
    } 
} 

http://jsfiddle.net/blackessej/9a6BJ/1/

В настоящее время форма представляет информацию в любом случае, но без отправки пользователю в thankyou, если все обязательные поля не заполнены. Если все обязательные поля поданы, вызывается страница благодарности.

+1

где вы называете 'validateForm'? – lbstr

+1

вы должны использовать событие onsubmit формы, чтобы вызвать ваш метод validateForm ... видимо, вы даже не вызываете его –

+2

также, 'validateForm' в настоящее время возвращает' undefined', если все проверяется. Просто добавьте 'return true' в конец – lbstr

ответ

2

Вы не вызывая ValidatorForm. Ваша кнопка ввода должна быть следующей

<input type="submit" id="sbutton" value="Submit Request" onclick="return validateForm()" /> 

Или использовать onsubmit события вашей формы

<form action="../visit/thankyou.html" method="post" id="vsurvey" onsubmit="return validateForm()"> 
+0

Не используйте встроенный JS! Легко (и бесконечно лучше) создать событие отправки в скрипте. –

+0

Многое, спасибо @Robbert. Сейчас работает как шарм. – blackessej

+0

@Robbert, у меня есть следующий вопрос, если у вас есть время и наклон. В настоящее время сообщение об ошибке вызывает только самое верхнее сообщение с не подтвержденным полем. Как я могу адаптировать мой код так, чтобы он вызывал сообщение об ошибке для всех неутвержденных полей? – blackessej

2

Вам нужно создать onSubmit событие для вызова validateForm:

document.getElementById('vsurvey').onsubmit = validateForm; 
Смежные вопросы