Question

我一直在做这项任务的时间最长。我的表单验证以前没有工作，但后来我发现错误是什么＆amp;一切都很完美。

稍后，我对代码进行了一些更改，然后删除了这些更改，现在验证无法再次使用＆amp;这次我似乎无法找到问题所在。

以下是我未完成的代码：

 
    function validateEmail() {
    
        var email = document.getElementById('email').value;
        if( email==null || email=="")
    	{
    	alert("Please input an email address");
    	}
     }  

function validateFName() {

    var firstname = document.getElementById('firstname').value;
    if( firstname==null || firstname=="")
	{
	alert("Please input a last name");
	return false;
	}
 }
    	function validateLName() {
    
        var lastname = document.getElementById('lastname').value;
        if( lastname==null || lastname=="")
    	{
    	alert("Please input a last name");
    	}
     }
    	
    		function validateGender() {
    
        var gender = document.getElementById('gender').value;
        if( gender==null || gender=="")
    	{
    	alert("Please select a gender");
    	}
     }
     
     
    		function validateDate() {
    
        var date = document.getElementById('date').value;
        if( date==null || date=="")
    	{
    	alert("Please select a date");
    	}
     }
     
    		function validateVName() {
    
        var vname = document.getElementById('vname').value;
        if( vname==null || vname=="")
    	{
    	alert("Please input a victim's name");
    	}
     }
     
     function validateVEmail() {
    
        var vemail = document.getElementById('vemail').value;
        if( vemail==null || vemail=="")
    	{
    	alert("Please input a victim's email");
    	}
     }

    <div id="navi">
      <nav>
    <ul class="fancyNav">
             <li id="home"><a href="#home" class="homeIcon">Home</a></li>
             <li id="news"><a href="#truth">TRUTH</a></li>
             <li id="about"><a href="#Dare">DARE</a></li>
         </ul>
      </nav>
      </div>
        
    <div id="box">
    <form id="truth">
    
    <h1> Truth </h1>
    <label> First Name: </label> <input type="text" name="firstname" id="firstname" maxlength="30" placeholder="John" /> <br><br>
    <label> Last Name: </label> <input type="text" name="lastname" id="lastname" maxlength="30" placeholder="Doe" /> <br><br>
    <label> Email:</label> <input type="text" name="email" id="email"  /> <br><br>
    <label> Male </label><input type="radio" name="gender" id="gender" value="male"/>
    <label> Female </label><input type="radio" name="gender" id="gender" value="female"/> <br><br>
    <label> Date to be performed: </label><input type="date" name="date" id="date" /><br><br>
    <h2> Victim </h2>
    <label> Name: </label>  <input type="text" name="vname" id="vname" maxlength="30" /><br><br>
     <label> Email:</label> <input type="text" name="vemail" id="vemail"  /> <br><br>
    
    
        <h2> Please select a truth questions below </h2> <br>
    <input type="radio" name="truth" value="q1"> Have you ever fallen and landed on your head? <br>
      
      <input type="radio"  name="truth" value="q2"> Have you ever return too much change? <br>
      
      <input type="radio" name="truth" value="q3"> Have you ever been admitted into the hospital? <br>
      
      <input type="radio" name="truth" value="q4"> Have you ever baked a cake? <br>
      
      <input type="radio" name="truth" value="q5"> Have you ever cheated on test? <br>
      
      <input type="radio" name="truth" value="q6"> Did you ever wish you were never born? <br>
      
      <input type="radio" name="truth" value="q7"> Did you ever hide from Sunday School? <br><br>
    
    <input type="submit" onclick="validateFName(); validateLName(); validateGender(); validateDate(); validateVName(); validateVEmail();" /> <br>
    </form>
    </div>

Answer 1

<input type="submit" onclick="validateFName(); validateLName(); validateGender(); v

函数名中的拼写错误，onclick =＆＃34;验证 F 名称（）...

应验证 L 名称（）

你定义了重复的

<!DOCTYPE html>
<html> // remove this one

Answer 2

最好的解决方案是根本不使用任何alert框，而是将错误消息嵌入错误位置旁边，但这样做会更复杂。相反，要坚持使用此解决方案，请先在提交按钮中添加一个ID：

<button type="submit" id="truth-submit">Submit</button>

然后，通过JavaScript附加onclick处理程序（并重写您的代码以便更可重复使用）：

// Only run when the window fully loads
window.addEventListener("load", function() {
    function validateEmail() {
        var email = document.getElementById("email").value;
        if (email === null || email === "") {
            return "Please input an email address";
        }
        return "";
    }

    function validateFName() {
        var firstname = document.getElementById("firstname").value;
        if (firstname === null || firstname === "") {
            return "Please input an first name";
        }
        return "";
    }

    function validateLName() {
        var lastname = document.getElementById("lastname").value;
        if (lastname === null || lastname === "") {
            return "Please input an last name";
        }
        return "";
    }

    function validateGender() {
        var gender = document.getElementById("gender").value;
        if (gender === null || gender === "") {
            return "Please select a gender";
        }
        return "";
    }

    function validateDate() {
        var date = document.getElementById("date").value;
        if (date === null || date === "") {
            return "Please select a date";
        }
        return "";
    }

    function validateVName() {
        var vname = document.getElementById("vname").value;
        if (vname === null || vname === "") {
            return "Please input a victim's name";
        }
        return "";
    }

    function validateVEmail() {
        var vemail = document.getElementById("vemail").value;
        if (vemail === null || vemail === "") {
            return "Please input a victim's email";
        }
        return "";
    }

    document.getElementById("truth-submit").addEventListener("click", function(event) {
        // Grab all of the validation messages
        var validationMessages = [validateFName(), validateLName(),
            validateGender(), validateDate(), validateVName(), validateVEmail()];

        var error = false;

        // Print out the non-blank ones
        validationMessages.forEach(function(message) {
            if (message) {
                alert(message);
                error = true;
            }
        });

        // Stop submission of the form if an error occurred
        if (error) {
            event.preventDefault();
        }
    }, false);
}, false);

Onclick验证无效

2 个答案: