javascript to check if user has inputted [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overl开发者_StackOverflowy broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 11 years ago.

I have a form

<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>

I need some sort of validation javascript that:

1. Checks if user entered a message id and checked one of the radio buttons. (So message id and radio group are required fields)
2. Display an error message if any of the required fields is not set.
3. Block form submit until required fields are entered.

Can anyone help?

---

You will have to do a validation before submit.

Add an on submit event handler (that will be called when the form is submitted) to the form:

You can do this in two ways:

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

OR

in the <script> part:

window.onload = init;

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

Now write the validate function itself (same for both options above):

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.

    }
}

---

UPDATE. Now it should work.

// 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;
   } 
}