Results 1 to 5 of 5

Thread: Required fields but ONLY if data entered in another field that isn't required

  1. #1
    Join Date
    Oct 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Required fields but ONLY if data entered in another field that isn't required

    I have a form that allows users to enter textbook information for their course. They need to include information such as author, publisher, book title, isbn, etc. They can enter information for more than one book if they choose.

    I need to write some code that makes the publisher and book title fields required...but ONLY if they choose to add a first, second, third book.

    I guess what I'm looking for is some help on how to create required fields that are dependent on some other field being selected/checked.

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default Solution - MAYBE

    There really isn't any HTML way of taking care of required fields, so JavaScript will save the day! What JavaScript might do for you is give an if statement including bool variables, in otherwords variables that contain either true or false. Technically in the if statement, there should be one variable that tells us either that there are three books entered or not. This will be taken care of in another function which will determine if all of the three books are entered into the fields. If all three books are entered, then the bool variable will be true. Otherwise it will be false. In the first function, we discussed that if this certain bool variable is true, something will happen. We will discuss that later. Anyway, the certain bool variable will tell if the three books have been entered. If so, in the if statement we will check if the textboxes contain characters ( if(document.getElementById("yada").value == "") { alert("You must enter publisher and title if you have three books.") } else { ...do something else if the user entered stuff in correctly... }). It is very hard to explain, but it is very easy to understand and code. I was just giving a suggestion. I am truly sorry if it doesn't help, but considering that you are a junior coder, you should be able to understand at least a little bit. If this situation is very important, let me see what I can whip up. E-mail me at magicyte.programmer@gmail.com. I'm sure I could come up with something if you could just email the code for such program as well. Sayonara!

    -magicyte

  3. #3
    Join Date
    Oct 2007
    Posts
    43
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    I have a similar problem, I have a form with a series of yes/no radio boxes and 'why' textareas. I need the text areas to be required, but ONLY if the corresponding 'no' radio button has been selected.

    Code:
        <p>1. *Question goes here*</p>
          <p>
          <label>
          <input type="radio" name="1" value="Yes" id="1_0" />
    Yes</label>
          <br />
          <label>
          <input type="radio" name="1" value="No" id="1_1" />
    No</label>
          <label></label>
          <br />
        </p>
        <p>&nbsp;</p>
        
        <p>1a. If not, why not?</p>
        <p>&nbsp;</p>
        <p>
          <textarea name="1a" id="1a" cols="60" rows="5"></textarea>
        </p>
    I only have a vague idea what magicyte is talking about. Anyone have a piece of sample code I can play with?

  4. #4
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Here is a longer explanation for you

    How do you do a "required field" in JavaScript? The answer is that you have an onSubmit method on the form that returns false if validation fails. It might also do an alert. So expanding the example you gave:
    Code:
      <script>
        function checkForm() {
          if ( document.getElementById("1_1").checked ) {
            var mytext = document.getElementById("1a").value;
            if ("" == mytext) {
              alert("Explanation needed for No answer to question #1");
              return false;
            }
          }
          return true;
        }
      </script>
      <form onSubmit="return checkForm()">
          <p>1. *Question goes here*</p>
          <p>
          <label>
          <input type="radio" name="1" value="Yes" id="1_0" />Yes</label>
          <br />
          <label>
          <input type="radio" name="1" value="No" id="1_1" />No</label>
          <label></label>
          <br />
        </p>
        <p>&nbsp;</p>
    
        <p>1a. If not, why not?</p>
        <p>&nbsp;</p>
        <p>
          <textarea name="1a" id="1a" cols="60" rows="5"></textarea>
        </p>
        <input type=submit></input>
      </form>
    Now be warned that anyone who wants can bypass JavaScript checks by just turning JavaScript off. Or by copying your page, manually editing out the JavaScript, and then submitting from that. Therefore if it really matters to you, all validation checks must happen on the server side, and the JavaScript checks are just a convenience for your users. Getting that set up is beyond what I'm willing to answer in this post.

  5. The Following User Says Thank You to btilly For This Useful Post:

    marynorn (07-14-2008)

  6. #5
    Join Date
    Oct 2007
    Posts
    43
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    HA! I have edited this reply twice with problems, then realised the problem is ME. I need more coffee, your code works beautifully. Thank you very much
    Last edited by marynorn; 07-14-2008 at 10:12 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •