使用 javascript 循环遍历 Html 表单答案

【问题标题】：Looping through Html forms with javascript使用 javascript 循环遍历 Html 表单
【发布时间】：2014-10-26 12:00:01
【问题描述】：

尝试验证 html 表单，以便在填写完所有字段并输入有效的电子邮件地址后，它会创建一个模拟电子邮件，其中包含表单中的详细信息。它目前仅在第一次工作，我希望它始终检查名字和姓氏字段是否不为空。

当前代码：

function validate_form(thisform){
      with (thisform){
        if ((validate_required(firstname,lastname,email,"All fields must be filled out!")==false) || (validate_email(email,"Not a valid e-mail address!")==false)){
           firstname.focus();
           lastname.focus();
           email.focus();
           return false;
        }
           return true;         
        }
      }

这是我的表格

<form name="registration" action="mailto:example.example@example.com?subject='example'" onsubmit="return validate_form(this)" method="post" enctype="text/plain">
First Name: <input type="text" name="firstname">
Last Name: <input type="text" name="lastname">
Email : <input type="text" name ="email">
<input type= submit value="Send email" onclick="return validateForm();">&nbsp;&nbsp;&nbsp; 
<input type="reset" value="Reset">
</form>

我删除了一些语法来读取表单代码

【问题讨论】：

当你说它只有第一次有效时，第二次会发生什么？任何控制台错误？
如果电子邮件的输入格式正确，它将在第二次提交，如果没有在名字或姓氏字段中输入任何内容，仍将提交。 @Ozzy
听起来您正在使用全局变量来检查表单是否已验证？
我正在使用这个函数来验证字段是否为空 'function validate_required(field,field2,field3,alerttxt){ with (field,field2,field3){ if (value==null| | value==""){ alert(alerttxt);return false; } 其他{ 返回真； } } }'
这不是问题所在

标签： javascript html forms loops if-statement

【解决方案1】：

我创建了一个JSFiddle，只需进行一些更改，您的验证就可以工作 - 主要是从input type=submit 中删除return validateForm()

http://jsfiddle.net/a34z195t/:

<script>
function validate_form(thisform) {
    with(thisform) {
        if ((validate_required(firstname, lastname, email, "All fields must be filled out!") == false) || (validate_email(email, "Not a valid e-mail address!") == false)) {
            firstname.focus();
            lastname.focus();
            email.focus();
            return false;
        }
        return true;
    }
}

function validate_required(field, field2, field3, alerttxt) {
    with(field, field2, field3) {
        if (value == null || value == "") {
            alert(alerttxt);
            return false;
        } else {
            return true;
        }
    }
}
</script>
<form name="registration" action="mailto:example.example@example.com?subject='example'" onsubmit="return validate_form(this)" method="post">First Name:
    <input type="text" name="firstname" />
    <br />Last Name:
    <input type="text" name="lastname" />
    <br />Email :
    <input type="text" name="email" />
    <br />
    <input type="submit" value="Send email" />&nbsp;&nbsp;&nbsp;
    <input type="reset" value="Reset" />
</form>

【讨论】：