Javascript表单验证未执行，输入文本框高度光标定位未设置为顶部

Question

我创建了一个简单的联系人表单，我正在尝试使用javascript进行验证，以确保所有字段都已填写完毕，我有以下html代码。

        <form method="post" action="send.php" onSubmit="checkEmail()" >
        <table>
            <tr>
                <td><h1>Name: </h1></td>
                <td><input type="text" max="30" name="name" placeholder="What should I call you?"/></td>
            </tr>
            <tr>
                <td><h1>EMAIL: </h1></td>
                <td><input type="email" max="50" name="email" placeholder="email"/> </td>
            </tr> 
            <tr>
                <td valign="top"><h1>Message</h1></td>
                <td><input id="message" type="textbox" name="message" max="1000" align="texttop" placeholder="Whats up?" /></td>
            </tr>
            <tr><td></td><td><input type="submit" name="send" value="SEND" /></td></tr>
        </table>
        </form>

这是我的javascript

function checkEmail(){
if(form.email.value==" "){
    alert("Please enter a email");
}

}

但是，如果用户没有填写表单，表单不会提醒他们，而是简单地执行我为action属性键入的php文件。

我遇到的另一个问题是，我给了消息输入字段300px的宽度，文本框确实变大了，但文本框内的光标仍然在框的中间，当我输入时，输入一直在继续，而不会掉到框内的另一行。

Answer 1

这可能会有所帮助。有很多方法可以做到这一点。但这是一种方法，我已经用了几十次

首先识别您的表单：

<form action="send.php" id="myForm" name="myForm" method="post" enctype="multipart/form-data">

此处的表单代码

然后对你的发送按钮执行此操作

<div> <a onclick="document.getElementById('myForm').submit()"><span>Send</span></a> </div>

这应该让它把信息发布到你的服务器上，并在处理后点击

Answer 2

没有定义"form"变量。要么使用document.forms[0].email.value，要么首选的方法是给每个输入一个id:

输入元素：

<input type="email" max="50" id="email" name="email" placeholder="email"/>

JavaScript:

function checkEmail() {
    if(document.getElementById("email").value === "") {
        alert("Please enter an email").
        //return false to prevent submit when using onsubmit directly on form
        return false;
    }
}

请确保在您的表单标签中也使用退货：

<form method="post" action="send.php" onsubmit="return checkEmail();">

Answer 3

function checkEmail(){
if(document.forms[0].email.value==""){
    alert("Please enter a email");
    return false;
}else{
    return true;
}
}

和

<form method="post" action="send.php" onsubmit="return checkEmail()" >

http://jsfiddle.net/5Dy89/1/

Answer 4

您还可以随时使用this关键字来跟踪您的表单。对于JavaScript，这只是将this重新分配给函数的问题。

<form onsubmit="return checkEmail.call(this);"><!-- More goes here --></form>

然后您的JavaScript函数就可以访问this:

function checkEmail() {
  var valid = !!this.email.value.match(/S/); // Checks for anything but spaces
  if(!valid)
    alert('Please enter an email.');
  return valid; // If true is returned for onsubmit, it sends off the form
}