javascript - javascript form validation not doing anything

Question

i am trying to ensure an in put the contents of an input field is within an allowable number of character and if it is not print out an error message after the input field. the bellow js is contained in an external js file.

    function validateForm()
    {
        var err_msg = getElementById('feedback_msg_first_name').value;
        var first_name = getElementById('first_name').value;
        if(first_name.length < 2)
        {
            err_msg.innerHTML = 'first name cannot contain less than 2 characters';
            return false;
        }
        if(first_name.length > 20)
        {
            err_msg.innerHTML = 'first name cannot contain more than 20 characters';
            err_msg.style.color = 'red';
        }
    }

The basic markup

<script type="text/javascript" language="javascript" src="client_form_val.js"></script>
</head>
<body>
<form id="register"  name="register" action="includes/register.inc.php" method="post" onsubmit ="return validateForm();">
    <label class="label">First Name:</label>        <input type="text" name="first_name" id="first_name" /><br />
    <span id="feedback_msg_first_name"></span>

the form is simply submitting without anything happening. where an I going wrong? any help would be appreciated.

score 0 · Accepted Answer

エラーの取得:

Uncaught ReferenceError: getElementById is not defined

不足しているドキュメントを修正すると、これが得られます

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

2つ目の理由はこれ

var err_msg = getElementById('feedback_msg_first_name').value;  <-- string
err_msg.innerHTML = 'first name cannot contain less than 2 characters';  <--performing innerHTML on string

score 0 · Accepted Answer

keyup イベントがフォームで発生したときに関数を呼び出しています。その結果、ユーザーが 1 文字を入力した後に自分の名前を入力し始めると、エラーメッセージが表示されます。

keyup イベントが発生したときに関数を呼び出す代わりに、ボタンのクリックが発生したときに関数を呼び出します (名前全体が入力されたとき)。

score 0 · Accepted Answer

0

You are forgetting to do document.getElementById. Firebug is giving errors on that

于 2012-11-01T13:49:57.733 に答える

score 0 · Accepted Answer

Try this

 function validateForm()
{
    var err_msg = document.getElementById('feedback_msg_first_name');
    var first_name = document.getElementById('first_name').value;
    if(first_name.length < 2)
    {
        err_msg.innerHTML = 'first name cannot contain less than 2 characters';
        return false;
    }
    if(first_name.length > 20)
    {
        err_msg.innerHTML = 'first name cannot contain more than 20 characters';
        err_msg.style.color = 'red';
    }
}

score 0 · Accepted Answer

Have a look at the following http://jsfiddle.net/VL7dc/2/

Rather than explaining where your going wrong, think you need to try and understand why this works and your doesnt.

  function validateForm() {
        var err_msg = document.getElementById('feedback_msg_first_name');
        var first_name = document.getElementById('first_name').value;

        if(first_name.length < 2) {
            err_msg.innerHTML = 'first name cannot contain less than 2 characters';
            return false;
        } else {
            err_msg.innerHTML = '';
        }
        if(first_name.length > 20)
        {
            err_msg.innerHTML = 'first name cannot contain more than 20 characters';
            err_msg.style.color = 'red';
        }
    }

javascript - javascript form validation not doing anything

5 に答える 5

Related

Reference