После нажатия «Подтвердить» окно предупреждения не появляется

Question

После нажатия «Подтвердить» окно предупреждения не появляется

0

Это моя домашняя работа, и это мой первый раз, чтобы сделать валидацию формы. Следующие коды - это мой код HTML и код JavaScript соответственно.

Код HTML:

<html>

<head>
    <script src="validate_form.js" type="text/javascript"></script>
</head>

<body>
    <table>
        <form name="register" method="post" action="">
            <tr><td>First Name:</td><td><input type="text" id="firstname"/></td></tr>
            <tr><td>Surname:</td><td><input type="text" id="surname"/></td></tr>
            <tr><td>Gender:</td><td><input type="text" id="gender"/></td></tr>
            <tr><td>Birthday - Day:</td><td><input type="text" id="dob"/></td></tr>
            <tr><td>Month:</td><td><input type="text" id="month"/></td></tr>
            <tr><td>Year:</td><td><input type="text" id="year"/></td></tr>
            <tr><td>Yahoo ID:</td><td><input type="text" id="yahoo_id"/></td></tr>
            <tr><td>Password:</td><td><input type="text" id="password"/></td></tr>
            <tr><td>Retype password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td><input type="text" id="retype"/></td></tr>
            <tr><td>Question 1:</td><td><input type="text" id="q1"/></td></tr>
            <tr><td>Answer 1:</td><td><input type="text" id="a1"/></td></tr>
            <tr><td>Question 2:</td><td><input type="text" id="q2"/></td></tr>
            <tr><td>Answer 2:</td><td><input type="text" id="a2"/></td></tr>
            <tr><td><input type="submit" value="Confirm" onclick="validate_form ()"/></td><td></td></tr>
        </form>
    </table>
</body>



</html>

Код JavaScript:

function validate_form () 

{
    var first = document.getElementById("firstname").value;  /*get value from the IDs*/
    var sur = document.getElementById("surname").value;
    var sex = document.getElementById("gender").value;
    var day = document.getElementById("dob").value;
    var month = document.getElementById("month").value;
    var year = document.getElementById("year").value;
    var yahooid = document.getElementById("yahoo_id").value;
    var ps = document.getElementById("password").value;
    var retype_ps = document.getElementById("retype").value;
    var ques1 = document.getElementById("q1").value;
    var ans1 = document.getElementById("a1").value;
    var ques2 = document.getElementById("q2").value;
    var ans2 = document.getElementById("a2").value;

    var error = "";                              /*Regular expressions for matching purpose*/
    var val_name = /^[a-zA-Z]{1,}$/;
    var val_dob = /^[0-9]$/;
    var val_yahoo = /^[a-zA-Z0-9_]$/;
    var val_pass = /^[a-zA-Z0-9]$/;

    if (first == null || surname == null || !val_name.test(first)  || !val_name.test(sur) ) /*Validate firstname and surname*/                   

    {
        error += "Invalid firstname and/or surname.\n";
    }

    else if (sex == null) /*Validate gender*/ 

    {
        error += "Invalid gender.\n";
    }

    else if  (day == null || !val_dob.test(day)) /*Validate day of birth*/ 

    {
        error += "Invalid day of birth.\n";
    }

    else if  (month == null) /*Validate month of birth*/ 

    {
        error += "Invalid month of birth.\n";
    }

    else if (year == null || !val_dob.test(year)) /*Validate year of birth*/ 

    {
        error += "Invalid year of birth.\n";
    }

    else if (yahooid == null || !val_yahoo.test(yahooid)) /*Validate Yahoo Id*/ 

    {
        error += "Invalid yahoo Id.\n";
    }

    else if (ps == null || !val_pass.test(ps)) /*Validate password entered*/ 

    {
        error += "Invalid password.\n";
    }

    else if (retype_ps == null || retype_ps != password) /*Validate retype password*/ 

    {
        error += "Retype password is different form password.\n";
    }

    else if (ques1 == null || ans1 == null || ques2 == null || ans2 == null) /*Validate question 1, answer 1, question 2, and answer 2*/ 

    {
        error += "Invalid Question 1 and/or Answer 1 and/or Question 2 and/or Answer 2.\n";
    }

    else if (error == "") /*If no error, display the following message*/ 

    {
        alert("Thank you for your registration.");
    }

    else /*If there are errors, display all the error messages*/

    {
        alert(error);
    }
}

Итак, теперь проблема в том, что не так с кодами, пока окно предупреждения не появилось? Надеюсь, что ошибки могут быть указаны полностью, потому что я до сих пор не знаком с JavaScript.

user3310635 21 март 2014, в 16:25

Источник

1

alert{error}; должен быть alert(error); ,
Rocket Hazmat 21 март 2014, в 15:21
0

Нашел только сейчас и исправил. Но окно оповещения до сих пор не появилось.
user3310635 21 март 2014, в 15:24
0

Вы пытались отладить себя с помощью отладчика Chrome или Firebug или инструментов разработчика IE?
El Guapo 21 март 2014, в 15:26
0

Я просто использовал Google Chrome, чтобы проверить это.
user3310635 21 март 2014, в 15:27
0

и что это сказал?
El Guapo 21 март 2014, в 15:35
0

После того, как я набрал все значения для проверки, ничего не произошло.
user3310635 21 март 2014, в 15:41

Показать ещё 4 комментария

Теги:

javascript

html

2 ответа

0

В Javascript у вас есть значения, которые считаются ложными:

ложный,

ноль,

не определено,

'',

0,

NAN;

Вы должны учитывать, что ваше значение может быть "неопределенным", поэтому, если бы я был вами, я бы сделал следующее:

if (!first || !surname || !val_name.test(first)  || !val_name.test(sur) )                   
{
    error += "Invalid firstname and/or surname.\n";
}

И поставьте свой скрипт в конце тега вашего тела.

Rodrigo Fonseca 21 март 2014, в 13:31

Ещё вопросы

Нашел только сейчас и исправил. Но окно оповещения до сих пор не появилось.
Вы пытались отладить себя с помощью отладчика Chrome или Firebug или инструментов разработчика IE?
Я просто использовал Google Chrome, чтобы проверить это.
После того, как я набрал все значения для проверки, ничего не произошло.

kpull1 · Accepted Answer · 2014-03-21T13-33-00.000Z

Когда вы объединяете сообщения в переменной error вы должны делать последнее, else if в качестве независимого if:

...
else if (ques1 == null || ans1 == null || ques2 == null || ans2 == null)
{
  error += "Invalid Question 1 and/or Answer 1 and/or Question 2 and/or Answer 2.\n";
}

if (error == "") /*If no error, display the following message*/ 
{
  alert("Thank you for your registration.");
}
else /*If there are errors, display all the error messages*/
{
  alert(error);
}

ПРИМЕЧАНИЕ. Я также заметил ошибку в проверке повторения пароля, вы изменили ее имя (вы назвали его password вместо ps).

Я загрузил два примера в JSFiddle: http://fiddle.jshell.net/kcDBU/

У этого есть только if вместо else if: http://fiddle.jshell.net/kcDBU/1/

Я изменил все «еще, если» на «если», и это работает. Но мне интересно, почему я не могу использовать «еще, если» вместо «если»?
потому что при первых признаках ошибки вы НИКОГДА не доберетесь до "ELSE"
как вы делаете в противном случае, если вместо одного, если каждый раз, вы никогда не получите более одного сообщения одновременно. попробуйте изменить все остальное, если для одного, если.