0

I cannot figure out why my script is not triggering. I am trying to create form validation for this select element, requiring that is the Other option is chosen, then the following input field be set as required. As it is, the other_lab input field is not becoming required when Other is chosen in the select element. Here is the code:

<form id="form_1" method="post">
<label for="lab">Lab</label>        
<select id="lab" required name="lab">
    <option disabled selected value="">Choose lab</option>
    <option value="Lab_1">ABC</option>
    <option value="Lab_2">DEF</option>
    <option value="Other">Other</option>
</select>

<label for="other_lab">If other, please specify: </label>
<input name="other_lab" id="other_lab" size="15">
</form>

<script type="text/javascript">
  var form = document.getElementById('form_1');
  form.onsubmit = function (e){
    if(document.getElementById('lab').value == "Other") {
      document.getElementById('other_lab').setAttribute("required","");
    }else{
      document.getElementById('other_lab').removeAttribute("required","");
    }
  }   
</script>
Chuck Beans
  • 35
  • 6
  • I changed the code slightly to only contain `getElementById` methods. I do not think this other question is still pertinent. – Chuck Beans Sep 10 '18 at 15:59
  • I don't think it has any effect if `onsubmit` you add a `required`-attribute on any of the input elements. That is only going to affect the next submit. – connexo Sep 10 '18 at 16:12
  • @connexo You were correct, thank you! I changed the `onsubmit` method to an `addEventListener("input"...)` and my problem was fixed. – Chuck Beans Sep 10 '18 at 16:23

3 Answers3

1

I don't think it has any effect if onsubmit you add a required-attribute on any of the input elements. That is only going to affect the next submit.

Instead, if you want to make sure the form submit doesn't go through, use

e.preventDefault();

inside the condition that you need to prevent it on. This will cancel the submit, and the added required attributes can take effect on the next submit.

connexo
  • 53,704
  • 14
  • 91
  • 128
0

Use document.getElementById instead with the form id as a parameter, you used it with your other elements, why don't you use it with the form as well?

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

var form = document.getElementById('form_1');
form.onsubmit = function(e) {
  alert('submit');
}
<form id="form_1" method="post">
  <label>Lab</label>
  <select id="lab" required name="lab">
    <option disabled selected value="">Choose lab</option>
    <option value="Lab_1">ABC</option>
    <option value="Lab_2">DEF</option>
    <option value="Other">Other</option>
  </select>

  <label for="other_lab">If other, please specify: </label>
  <input name="other_lab" id="other_lab" size="15">
  <input type="submit" value="submit" />
</form>

document.getElementsByTagName returns a NodeList, not a single DOM node.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

notice the s in Elements which signals that it returns some form of collection.

I suggest you have a look at this page to learn about HTML forms:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

mpm
  • 20,148
  • 7
  • 50
  • 55
  • Okay, I changed `getElementsByTageName('form')` to `getElementById('form_1')`, and the problem still exists. – Chuck Beans Sep 10 '18 at 15:57
  • Well you can execute my code by pressing "run code snippet", and find out that my code runs. I just replaced the body of your function with an alert to simplify things. – mpm Sep 10 '18 at 15:59
  • When I execute your code, the form is submitted regardless of the choices I choose. What I desire is for the input field to be required when the option `Other` is selected, and thus the form should not be able to be submitted. Otherwise, the form should be able to be submitted. – Chuck Beans Sep 10 '18 at 16:02
0

You can solve this by binding that same function on selectbox's change event.

siby mathew
  • 1