Solved

Required Field

Posted on 2012-03-27
5
331 Views
Last Modified: 2012-06-22
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>
0
Comment
Question by:LelloLello
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 400 total points
ID: 37773741
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
 
LVL 7

Assisted Solution

by:whosbetterthanme
whosbetterthanme earned 100 total points
ID: 37773775
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
 

Author Comment

by:LelloLello
ID: 37776733
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
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37777094
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
 

Author Comment

by:LelloLello
ID: 37777178
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

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question