Question

我正在尝试使用JavaScript验证表单。当输入字段为空时，它会输出错误消息。我遇到的问题是代码不会在提交时触发。

以下是HTML代码：

<head>
...
 <script type="text/javascript" src="./js/validate.js"></script>
....
</head>

...
      <form name="submitForm" method="post" id="submitBetaForm" onsubmit="return(validate())" action="validate.php" class="form-style">
        <label for="email">Email:</label>
          <input type="text" id="email-beta" name="email" placeholder="Enter Email"/>
        <label for="firstName">Name:</label>
          <input type="text" id="firstName" class="half-width" name="messageName"  placeholder="First name"/>
...

以下是JavaScript代码：

function validate()
{
    var email = document.submitForm.email;
    var first = document.submitForm.firstName;
    var last = document.submitForm.lastName;
    var message = document.getElementById('warning');

    message.innerHTML = 'This is working!';

    var newLineCharNum = 0, poemContentArray = 0;
    //check to make sure that there is actually new line in the 
    //text area. Ensure that code doesn't blow up.
    if(textarea.value.match(/\n/g) != null)
    {
        newLineCharNum = textarea.value.match(/\n/g).length;
        poemContentArray = textarea.value.split("\n");
    }

    //check for email, firstName, lastName
    //focus puts the cursor on the element that needs to be corrected.
    var lineNum = newLineCharNum + 1;
    // if(email.value.length > 30)
    // {
    //     message.innerHTML = 'Email should be less than 30 character';
    //     title.focus();
    //     return false;
    // }
    else if(email.value.length == 0 || title == "")
    {
        message.innerHTML = 'Please enter your email';
        title.focus();
        return false;
    }
    if (firstName.value.length > 30)
    {
        message.innerHTML = 'First name should be less than 30 character';
        authorName.focus();
        return false;
    }
    else if(firstName.value.length == 0 ||authorName == "")
    {
        message.innerHTML = 'Please enter your first name';
        authorName.focus();
        return false;
    }
    if (lastName.value.length > 30)
    {
        message.innerHTML = 'Last name should be less than 30 character';
        authorName.focus();
        return false;
    }
    else if(lastName.value.length == 0 ||authorName == "")
    {
        message.innerHTML = 'Please enter your last name';
        authorName.focus();
        return false;
    }
}

和PHP在这里：

<?php 

session_start();

include('connection.php');

if(isset($_POST['SEND'])){

    //get information from the form
    $email = $_POST['email'];
    $first_name = $_POST['messageName'];
    $last_name = $_POST['messageLast'];
    $interest = $_POST['interest'];
    $country = $_POST['country'];

    // Check connection
    if ($con)
    {
        $insert_query = "INSERT INTO `user` (`id`, `first_name`, `last_name`, `interest`, `country`, `time`, `email`) 
        VALUES (NULL, '$first_name', '$last_name', '$interest', '$country', CURRENT_TIMESTAMP, '$email')";

        $con->query($insert_query);
        $con->close();
        echo "here";
    }
    else{
        echo "ERROR!";
    }

    //store informationn in the sessiont for later use
    $_SESSION['email'] = $email;
    $_SESSION['first_name'] = $first_name;
    $_SESSION['last_name'] = $last_name;
    $_SESSION['interest'] = $interest;
    $_SESSION['country'] = $country;

    }

＆GT;

Answer 1

事实证明，您的示例充满了错误的变量名称和引用。例如，当您应该使用firstNmae时，请使用first。

我已经纠正了其中一些并且显然有效：http://jsfiddle.net/LHaav/1/

您只需要知道浏览器控制台中的JS错误，您就可以了。 ;）

Answer 2

你的Javascript中有很多问题 - 各地都有未定义的变量。但主要的问题是你的Javascript在那个小提琴中根本没有被执行。如果您将表单处理程序更改为onsubmit="return validate()"，您将看到未定义validate，尽管这可能取决于如何在小提琴中加载JS。

无论如何，要缓解此问题，请将脚本从头部移开并将其放在页面底部，即结束body标记之前。你至少现在有希望点击验证方法。

http://jsfiddle.net/LHaav/2/

现在你必须处理所有这些未定义的变量。

用于表单验证的JavaScript似乎没有被调用

2 个答案: