Question

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?

Answer 1

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.

    }
}