javascript检查用户是否输入了[关闭]

Question

我有一个表格

<form method="post" action="sendmail.php" name="Email form">

Message ID 
<input type="text" name="message_id" /><br/><br/>

Aggressive conduct 
<input type="radio" name="conduct" value="aggressive contact" /><br/><br/>

Offensive conduct 
<input type="radio" name="conduct" value="offensive conduct" /><br/><br/>

Rasical conduct 
<input type="radio" name="conduct" value="Rasical conduct" /><br/><br/>

Intimidating conduct 
<input type="radio" name="conduct" value="intimidating conduct" /><br/><br/>

<input type="submit" name="submit" value="Send Mail" />
</form>

我需要某种验证 javascript：

1. 检查用户是否输入了消息 ID 并选中了其中一​​个单选按钮。 （所以消息 id 和广播组是必填字段）
2. 如果未设置任何必填字段，则会显示错误消息。
3. 在输入必填字段之前阻止表单提交。

谁能帮忙？

Answer 1

您必须在提交前进行验证。

向表单添加一个 on submit 事件处理程序（将在提交表单时调用）：

您可以通过两种方式做到这一点：

<form method="post" action="sendmail.php" name="Email form" onsubmit=validate()>

或

在<script> 部分：

window.onload = init;

function init()
    {
         document.forms["Email form"].onsubmit = function() 
                                                           { 
                                                               validate(); 
                                                               return false; 
                                                           };
    }

现在编写验证函数本身（以上两个选项相同）：

function validate()
{
    var form = document.forms["Email form"]; //Try avoiding space in form name.
    if(form.elements["message_id"].value == "") //No value in the "message_id" box
    {
        alert("Enter Message Id");
        //Alert is not a very good idea. 
        //You may want to add a span per element for the error message
        //An div/span at the form level to populate the error message is also ok
        //Populate this div or span with the error message
        //document.getElementById("errorDivId").innerHTML = "No message id";

        return false;  //There is an error. Don't proceed with form submission.

    }
}

Answer 2

更新。现在它应该可以工作了。

// Register onsubmit callback function (this will be called when the user submit his data).
document.forms[0].onsubmit = validate;

function validate() {
   var message = document.getElementsByTagName('input')[0].value,
       radioButtons = document.getElementsByTagName('input'),
       oneRadioChecked = false;

   //  check that message is not empty
   if (message.length  === 0) {
      alert("no message inserted");
      return false;
   }

   // check that at least one radio has been checked 
   for (var i = 0; i < radioButtons.length && !oneRadioChecked; i++) {
      oneRadioChecked = (radioButtons[i].type === "radio" &&radioButtons[i].checked);
   }

   if (!oneRadioChecked) {
      alert("no radio button checked");
      return false;
   } 
}