Question

我正在尝试验证3个表单输入，基于此我想显示成功页面或失败页面。我必须使用JavaScript来做到这一点。到目前为止我有这个：

<script src="scripts/formvalidator.js"></script>
<form method = "post" onsubmit = "validateForm()" >

    <label><strong>Name:</strong></label>
    <br>
        <input type="text" name="name" id="name" placeholder="Enter first and last name" />            
<br>
<br>

    <label><strong>Email:</strong></label>
    <br>
        <input type="email" name="usremail" placeholder="hello@wavemedia.ie" />
<br>
<br>
<!-- comment box -->
    <legend><strong>Your Message</strong></legend>
        <textarea name="comments" id="comments" rows="10" cols="50">
        </textarea>
<div id="buttons"> 
<!-- buttons -->
    <input type="submit"  name="submit" id="submit" value="Send"  style="margin-left:100px;">
    <input type="reset" name="reset" id="reset" value="Reset"  style="margin-left:20px;">
</div>
</form>

我的JavaScript文件：

// JavaScript Document

//form validation
function validateForm() {

//name check
var name = document.getElementById("name").value; 
var nameLength = name.length; //get length of string stored in name

//email - ref http://www.w3schools.com/js/js_form_validation.asp
var email = document.getElementById("usremail").value; 
var atpos = email.indexOf("@");  //gets position of the @ symbol in the string
var dotpos = email.lastIndexOf("."); //gets position of the last dot in the string

//message - same method as name validation
var message = document.getElementById("comments").value; 
var messageLength = message.length;

if (name.length < 3)
{
    alert("Make sure all fields are filled in correctly");
    return false;

    }

    else if (atpos < 1 || dotpos<atpos+2 || dotpos+ 2 >= email.length) 
        {                               
            alert("Make sure all fields are filled in correctly");
        return false;

        }

    else if (messageLength < 20)
    {
    alert("Make sure all fields are filled in correctly");
    return false;

    }
    else {

    return true;
    }

    }

问题是当我运行代码并提交表单时 - 无论我输入什么 - 没有任何反应。

Answer 1

您已经定义了一个函数，但我看不到您在任何地方调用它。您需要通过将相应的HTML代码更改为此来调用它：

<input type="submit" name="submit" id="submit" value="Send" onclick="validateForm()" style="margin-left:100px;">

Answer 2

首先，将 onClick =“function（）;”添加到您的代码中。

如果您想按名称获取数据，请使用getElement s ByName（“tagname”）;

请注意，该函数返回数组。（因为您可以添加许多具有相同名称的输入，这就是为什么元素）。

工作小提琴[http://jsfiddle.net/pdp44fx4/2/][1]

我无法将其粘贴为链接，抱歉。

使用JavaScript验证表单输入

2 个答案: