Question

我已经搜索了网站，当我发现类似的问题时，我无法得到我需要的答案，所以我现在就问。我需要验证一个联系表单，PHP验证非常简单，但在基础级别上工作，我想通过JS通过浏览器验证来补充它，但它不起作用，JS验证不会触发或没有正确编码。< / p>

我在此页面上工作：http://camp-tags.com/?main_page=contact

提前感谢您寻找我。

该函数应该循环并确保4个元素不为空，并且phonenumber和email的两个变量都已正确格式化。如果任何标志为false，则应将错误推送到数组，然后在单个警报中输出所有错误。

以下是代码。（使用此处给出的提示进行更新。现在根本没有验证。）

*更新：我发现一个明显的错误我不敢相信我错过了。我没有关闭标签，现在已经完成，表格将不会发送，除非你输入电话正确但没有验证其余的，并且没有发出警告来建议什么是错的？ JS：

    function validateForm(event){
    var form1 = document.getElementById("form1"),
    phone = document.getElementById("phonenumber").value,
    email = document.getElementById("email").value,
    name = document.getElementById("name").value,
    address = document.getElementById("address").value,
    tomatch = /^\d{3}-\d{3}-\d{4}$/,
    emailMatch = /^\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,4}$/;

    var errors = [];
    if (phone){
    event.preventDefault();
    errors.push("The Phone Number is required.");
    return false;
    } else if (tomatch.test(phone)){
        return true;
    } else {
        event.preventDefault();
        errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
        return false;
    }

    if (name === null || name === " "){
        event.preventDefault();
        errors.push("The Name is required.");
        return false;
    } else {
        return true;
    }

    if (email === null || email === " "){
        event.preventDefault();
        errors.push("The email is required.");
        return false;
    } else if (emailMatch.test(email)){
        return true;
    } else {
        event.preventDefault();
        errors.push("The email must be formated as follows: name@domain.com.");
        return false;
    }

    if (address === null || address === " "){
        event.preventDefault();
        errors.push("The Address is required.");
        return false;
    } else {
        return true;
    }
    if(errors.length > 0){
        for(var i=0;i<errors.length;i++){
            alert(errors)
        }
        return false;
    } else {
        return true;
    }   
}

html：

向我们发送电子邮件

                <form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="return validateForm()">
     <label for="Name">Name:</label><br />
     <input size="100%" type="text" name="name" id="name"><br>
     <label for="Email">E-mail:</label><br />
     <input size="100%" type="text" name="email" id="email" value=""><br />
     <label for="Phone">Phone Number:</label><br />
     <input size="100%" type="text" name="phonenumber" id="phonenumber" value=""><br />
     <label for="Address">Shipping Address:</label><br />
     <input size="100%" type="text" name="address" id="address" value=""><br />

     <label for="comment">Input Comments/Questions:</label><br />
     <input size="100%" type="text" name="comment" value=""><br><br>
      Please choose a file: <br />
     <input name="uploaded" type="file" /><br />
     <br /> 

     <input size="100%" type="submit" value="Submit" /><br />
     <input size="100%" type="reset" value="Reset">
    </form>
    <script type="text/javascript" src="./assets/validation.js">

Answer 1

我不知道从哪里开始，但如果您需要自己的验证，则应从输入中删除required属性，因为FF会检查表单而不是验证函数。

执行event.preventDefault（）;您认为event中有什么？

在调用提交函数时应该传递它，并在函数定义中提供参数

onSubmit="validateForm(event);"

和函数定义应该是：

function validateForm(event) {
  ... 
  so you can do event.preventDefault()
  ...
}

你也可能有其他问题，但至少你会得到执行验证功能而且你会有事件

完成示例：

<script>

function validateForm(event) {

    var phone = document.getElementById("phonenumber").value,
    email = document.getElementById("email").value,
    name = document.getElementById("name").value,
    address = document.getElementById("address").value,
    tomatch = /^\d{3}-\d{3}-\d{4}$/,
    emailMatch = /^\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,4}$/,
    errors = [];

    if (!phone){
      errors.push("The Phone Number is required.");
    } else if (!tomatch.test(phone)){
      errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
    }

    if (!name){
      errors.push("The Name is required");
    }

    if (!email){
      errors.push("The email is required.");
    } else if (!emailMatch.test(email)){
      errors.push("The email must be formated as follows: name@domain.com.");
    }

    if (!address){
      errors.push("The Address is required.");
    }

    if (errors.length) {
      event.preventDefault();
      alert(errors.join("\n"));
    }

}
</script>

<form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="validateForm(event)">
 <label for="Name">Name:</label><br />
 <input size="100%" type="text" name="name" id="name"><br>
 <label for="Email">E-mail:</label><br />
 <input size="100%" type="text" name="email" id="email" value=""><br />
 <label for="Phone">Phone Number:</label><br />
 <input size="100%" type="text" name="phonenumber" id="phonenumber" value=""><br />
 <label for="Address">Shipping Address:</label><br />
 <input size="100%" type="text" name="address" id="address" value=""><br />

 <label for="comment">Input Comments/Questions:</label><br />
 <input size="100%" type="text" name="comment" value=""><br><br>
  Please choose a file: <br />
 <input name="uploaded" type="file" /><br />
 <br />

 <input size="100%" type="submit" value="Submit" /><br />
 <input size="100%" type="reset" value="Reset">
</form>

使用JavaScript验证多个表单域

向我们发送电子邮件

1 个答案: