Onclick 验证不起作用答案

【问题标题】：Onclick Validation not workingOnclick 验证不起作用
【发布时间】：2014-11-07 06:17:55
【问题描述】：

我从事这项任务的时间最长。我的表单验证之前没有工作，但后来我发现了错误是什么并且一切正常。

后来，我对代码进行了一些更改，然后删除了这些更改，现在验证不再起作用，这次我似乎找不到问题所在。

下面是我未完成的代码：

 
    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>

【问题讨论】：

具体描述您期望发生的事情以及当前正在发生（或未发生）的事情，以及说明问题所需的最少代码量会有所帮助。
followin 链接绝对有帮助.. tizag.com/javascriptT/javascriptform.php
您需要防止默认行为。此代码只会提交表单。
@Vector..dinesh 回答如果 OP 将使用return false 提交按钮的默认操作将被自动阻止。

标签： javascript html validation

【解决方案1】：

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

函数名称中的错字，onclick="validateFName()...

应该是 validateLName()

你定义了重复的

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

【讨论】：

它们是两个不同的功能，我需要添加额外的标签。
更新错字后，您的问题解决了吗？
没有类型，它们是两个不同的函数。一个是 validateFName()，另一个是 validateLName()。
但是我在你粘贴的代码中找不到函数 validateFName() 的定义
你可以仔细检查一下

【解决方案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);

【讨论】：