Required Field

I have the following code:

I would like to a professional required field, but I would like the required field to be like this form in red on the same page. which script i should use.


I have the following code. I would like to add a script to indicate a required field for question 1.
http://www.bendixvrc.com/register.asp 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio buttons</title>

<script type="text/javascript">
function checkme(ele){
      var inputbox = document.getElementById("specify");
      if(ele.value=="Yes"){
            inputbox.style.display="block";
            var er = document.getElementById("error");
            er.style.display="none";
      }else{
            inputbox.style.display="none";
      }
}
function checksubmit(f){
      var radio = f.contactMeYes.value;
      var inputbox = f.ContactMeSpecify.value;
      if(radio=="Yes" && inputbox==""){
            var er = document.getElementById("error");
            er.style.display="inline";
            return false;
      }else{
            var er = document.getElementById("error");
            er.style.display="none";
            return true;
      }
}
</script>
</head>
<body>
<form id="form1" name="form1" onSubmit="return checksubmit(this);" action="" method="post">
(* indicates a required field)
1. Any specific needs <b>*</b><br>
<label><input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>Yes</label>
<label><input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label><br>
<div id="specify" style="display:none;">
<label>Please specify:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</label>
<p id="error" style="color:red;display:none;">Required input! Or else... click "No" above...</p>
</div>
<input type="submit"/>
</form>
</body>
</html>
LelloLelloAsked:
Who is Participating?
 
designatedinitializerConnect With a Mentor Commented:
You can use this, if you want a border around the input field:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;border:red 1px solid;">

Open in new window

Or this, if you want to color the background:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;background:red;">

Open in new window

0
 
whosbetterthanmeConnect With a Mentor Commented:
Perhaps another way would to replace your <p> tag with a div tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio buttons</title>

<script type="text/javascript">
function checkme(ele){
      var inputbox = document.getElementById("specify");
      if(ele.value=="Yes"){
            inputbox.style.display="block";
            //var er = document.getElementById("error");
                  document.getElementById('error').innerHTML='';
            //er.style.display="none";
      }else{
            inputbox.style.display="none";
      }
}
function checksubmit(f){
      var radio = f.contactMeYes.value;
      var inputbox = f.ContactMeSpecify.value;
      if(radio=="Yes" && inputbox==""){
            var er = document.getElementById("error");
            //er.style.display="inline";
                  document.getElementById('error').innerHTML='<p style=color:red>Required input! Or else... click No above...</p>';
            return false;
      }else{
            //var er = document.getElementById("error");
                  document.getElementById('error').innerHTML='';
            //er.style.display="none";
            return true;
      }
}
</script>
</head>
<body>
<form id="form1" name="form1" onSubmit="return checksubmit(this);" action="" method="post">
(* indicates a required field)
1. Any specific needs <b>*</b><br>
<label><input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>Yes</label>
<label><input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label><br>
<div id="specify" style="display:none;">
<label>Please specify:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</label>
<div id="error"></div>
</div>
<input type="submit"/>
</form>
</body
0
 
LelloLelloAuthor Commented:
Hello,

it's not the color... If the user click submit without clicking the radio button a message should appear say please complete question 1.  now it's not working.
0
 
designatedinitializerCommented:
Change this
      if(radio=="Yes" && inputbox==""){

Open in new window


to this

      if(radio=="Yes" && inputbox=="" || radio==""){

Open in new window


...but you should have a default value assigned in the first place.
So, change this:
<input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>

Open in new window


to this:
<input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);" checked="checked"/>

Open in new window

0
 
LelloLelloAuthor Commented:
Thank you for your reply.

But, no it's a good idea... Just to le tyou know that 'no' or 'yes' shouldn't  be checked... the user has to checked so if he didn't checked a msg should show please complete required field question 1.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.