1

我正在编写联系表格。我有两个 JavaScript 函数（我稍后会移动它们，但这是另一个问题）。

onblur 事件的第一个函数 ,Validate()有效，但不是我想要的。onsubmit 事件的第二个函数 ,formValidate()有效。

我在 JavaScript 函数中有一个 switch 语句，可以在HTML onblur 事件中使用。

JavaScript 代码：

<head>
    <script type="text/javascript">
        function Validate()
        {
            // Create array containing textbox elements
            var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')];

            // Loop through each element to see if value is empty
            for (var i = 0; i<input.length; i++)
            {
                if (input[i].value == '')
                {
                    switch( input[i].id){
                        case 'fname':
                        alert ('enter you first name');
                        break;

                        case 'lname' :
                        alert ('enter your last name');
                        break;

                        case 'email1':
                        alert ('enter your email address');
                        break;

                        case 'email2':
                        alert ('enter your email address');
                        break;

                        case 'message':
                        alert ('write your message');
                        break;
                    }
                }
            }
        }

        function formValidate()
        {
            // Create array containing textbox elements
            var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
            var error;

            // Loop through each element to see if value is empty.
            for(var i = 0; i<inputs.length; i++)
            {
                if(inputs[i].value == '')
                {
                    error = 'Please complete all fields.';
                    alert(error);
                    return false;
                }
            }
        }
    </script>
</head>

的HTML：

<form onsubmit="return formValidate()"  action="mailto:admin@sfasc.com.au" method="post"  id="contactForm" >
    <fieldset>
        <dl>
            <dt> First Name:</dt>
            <dd>
              <input class="input" type="text"  name="fname" id="fname" onblur="Validate()" />
            </dd>
            <dt> Last Name:</dt>
            <dd>
              <input class="input" type="text"  name="lname" id="lname" onblur="Validate()"/>
            </dd>
            <dt> Email Address:</dt>
            <dd>
              <input class="input" type="text"  name="email1"  id="email1" onblur="Validate()"/>
            </dd>
            <dt> Email Address:</dt>
            <dd>
              <input class="input" type="text"  name="email2"  id="email2" onblur="Validate()"/>
            </dd>
            <dt> Message:</dt>
            <dd>
              <textarea  name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea>
            </dd>
            <dd>
              <input type="submit" value="submit" name="submit"  />
            </dd>
        </dl>
    </fieldset>
</form>

代码有效，除了这个：当我点击一个字段时，我收到以下警报：

JavaScript 警报

如果我单击，防止弹出窗口，警报将完全停止。如果我单击“确定”，它会转到下一个字段，例如从 fname 到 lname，然后继续浏览这些字段，从而阻止用户输入任何数据。

我该如何解决这个问题？

4

2 回答 2

3

恐怕您必须重新考虑整个验证代码。接下来正在发生：

  1. 用户输入“名字”
  2. 脚本遍历input数组
  3. round1: 没问题fname--> 是的，下一个i
  4. round2:lname可以 --> 不，显示警报
  5. round3:没问题email1--> 不，显示警报 ...

当这被迭代并且用户最终可以输入下一个字段时，上述循环将再次执行，尽管每个新循环都会少一个警报。

一个简单的修复将是这样的：

function Validate(id) {
    var errors = {
        fname: 'enter you first name',
        lname: 'enter your last name',
        email1: 'enter your email address',
        email2: 'enter your email address',
        message: 'write your message'
    };
    if (document.getElementById(id).value === '') {
        if (id in errors) {
            alert(errors[id]);
        }
    }
    return;
}

在HTML中，只需将对应的传递id给Validate()：

<input class="input" type="text"  name="fname" id="fname" onblur="Validate('fname')" />

但是，我会发现这种烦人的行为。如果您在提交时进行了验证，如果有空字段，则取消提交会更舒服。

于 2013-06-13T14:52:15.790 回答
3

我认为这就是你想要的：

演示

无需验证所有输入模糊，只需验证留下焦点的输入。为此，我已将元素传递到Validate(this)HTML 内联代码中。您还遇到了一些元素 ID 问题（例如，没有消息字段）。如果输入无效，我还添加了一个.focus()调用以使输入保持焦点。

function Validate(elem) {
    // create array containing textbox elements
    var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];

    for (var i = 0; i < input.length; i++)
    // loop through each element to see if value is empty
    {
        if (input[i].value == '' && elem.id == input[i].id) {
            switch (input[i].id) {

                case 'fname':
                    alert('enter you first name');
                    break;
                case 'lname':
                    alert('enter your last name');
                    break;
                case 'email1':
                    alert('enter your email address');
                    break;
                case 'email2':
                    alert('enter your email address');
                    break;
                case 'message':
                    alert('write your message');
                    break;
            }

            elem.focus();
        }
    }
}

我不得不说，虽然很多alert()'s 非常讨厌，但如果你在每个文本框旁边显示一个带有错误消息的 span 会更好。

于 2013-06-13T15:01:49.713 回答