Using javascript to make something required

Question

As part of the form I have created users can select whether they want their order posted or to collect them. The appropriate div is shown when they make their choice from the radio buttons, i.e when they choose postage the inputs for them to enter their delivery address appears, and if they select collection a drop down box appears for them to pick the shop where they want to collect.

So am I trying to make it that the inputs or the drop down box be required by using JavaScript but what I am doing is not working and I can't see why as I have done similar things before and it has worked with no issues.

This is the html:

<p>Would you like postage(£7.25 extra) or to collect from one of our shops?</p>

<label class="checkbox-inline"></label>
<input type="radio" required name="delivery[]" onchange="calc()" class="deliv" id="delivery" data-descTarget="k_0" value="7.25">Postage


<label class="checkbox-inline"></label>
<input type="radio" name="delivery[]" class="deliv" onchange="calc()"  id="collection" data-descTarget="k_1" value="0"/>Collection

    <div id="k_0" class="desc">
<label>Please enter your delivery address</label>
<table border="0" cellpadding="0" id="table2">

<tr>
<td align="right">Name</font></td>
<td><input type="text" name="name1" id="name"  size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Email</font> 
(Your confirmation will be sent here): </td>
<td><input type="text" name="email1" id="email" size="20" tabindex="1"></td>
</tr>
<tr>
<td align="right">Phone number:</td>
<td><input type="text" name="number1" id="number" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Address:</td>
<td><input type="text" name="address1" id="address" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Town:</td>
<td><input type="text" name="town1" id="town" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Postcode:</td>
<td><input type="text" name="postcode1" id="postcode" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">County:</td>
<td><input type="text" name="county1" id="county" size="15" tabindex="1"></td>
</tr>
</table> 
    </div>
    <div id="k_1" class="desc">
   <div class="select-style">
<label>Collection Point</label> 
<select id="collect"  name="collect">
<option value="None" selected="selected">Select One</option>
<option value="Alford" >Alford</option>
<option value="Auld Toon" >Auld Toon</option>
<option value="Banff" >Banff</option>
<option value="Emmas">Emmas</option>
<option value="Insch" >Insch</option>
<option value="Kemnay" >Kemnay</option>
<option value="Market Place" >Market Place</option>
<option value="Mastrick"> Mastrick</option>
<option value="Meldrum Bakery" >Meldrum Bakery</option>
<option value="North Street" >North Street</option>
<option value="Rousay" >Rousay</option>
<option value="Seafield Street" >Seafield Street </option>
<option value="St Machar" >St Machar </option>
<option value="St Swithin" >St Swithin Street </option>
<option value="Stonehaven" >Stonehaven</option>
<option value="Torry" >Torry</option>
<option value="Keystore Old Aberdeen" >Keystore Old Aberdeen</option>
<option value="Keystore Old Meldrum" >Keystore Old Meldrum </option>
<option value="Highclere" >Highclere</option>
</select>
</div>
    </div>
<input type='submit' id='submit' name="submit" onClick="checkValue()"  class="submit" value='Submit' />

This is the script that hides the divs until the appropriate radio button is selected:

<script type="text/javascript">
$(document).ready(function() {
  $("div.desc").hide();
  $("input[name$='delivery[]']").click(function() {
    var choice = $(this).attr("data-descTarget");
    $("div.desc").hide();
    $("#" + choice).show();
  });
});

</script>

This is what I have tried for making the fields required:

function checkValue() {

    if (document.getElementById('delivery').checked) {
      document.getElementsByName("name1").required = true;
      document.getElementsByName("email1").required = true;
      document.getElementsByName("number1").required = true;
      document.getElementsByName("address1").required = true;
      document.getElementsByName("town1").required = true;
      document.getElementsByName("postcode1").required = true;
      document.getElementsByName("county1").required = true;
      document.getElementById("collect").required = false;


} else if (document.getElementById('collection').checked) {
            document.getElementById("collect").required = true;
            document.getElementsByName("name1").required = false;
            document.getElementsByName("email1").required = false;
            document.getElementsByName("number1").required = false;
            document.getElementsByName("address1").required = false;
            document.getElementsByName("town1").required = false;
            document.getElementsByName("postcode1").required = false;
            document.getElementsByName("county1").required = false;

}


}

Where have I gone wrong with the checkValue script?

akaBase · Accepted Answer · 2019-08-07 14:16:28Z

2

I've used JQuery here as you are using it already, but this function will update the inputs like you are looking for and to make it easier to update and add/remove fields I used an array of input id's to loop through rather than hardcoding each one as you are.

function updateRequiredFields (isCollecting){

    var deliveryFields = ["name","email","number", "address", "town", "postcode", "county"];

    for(var x = 0; x < deliveryFields.length; x++){
        $("#" + deliveryFields[x]).attr("required", !isCollecting);
    }

    $("#collect").attr("required", isCollecting);
}

Edit: Update for comment.

Your Inputs aren't wrapped inside of a form, after wrapping them in a form it works as intended.

edited Aug 7, 2019 at 14:16

answered Aug 7, 2019 at 12:05

akaBase

2,2501 gold badge20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Lewis Ross Over a year ago

thanks for answer but nothing seems to be happening. No errors appear but still allows you to submit form without putting anything in the input fields or selecting a collection point (depending on radio button choice)

akaBase Over a year ago

If you check the DOM you will see that the required attribute is added to the elements?

Lewis Ross Over a year ago

it is within a form, but nothing is happening

akaBase Over a year ago

As @andreSilva has set you need to declare the <!--DOCTYPE> at the start of your HTML, This should get you thinking about proper markup, most IDE's come with default templates for common file types, use them to save yourself alot of agro!

Lewis Ross Over a year ago

That's it working exactly how it want it to now, really appreciate you taking the time to help. Thank you!

|

André Silva · Accepted Answer · 2019-08-07 12:04:11Z

1

I'd say its because you're sending info to an attribute of an array instead of the element itself. When you ask JS to receive true for the required attribute, you're sending to the array, since getElementsByName returns a collection of elements. You gotta iterate through those.

function changeRequireForAll(els, required) {
  for(var i = 0; i < els.length; i++) {
    if(els[i]) {
      els[i].required = required;
    //you could do els[i].setAttribute('required', required); too
    } 
  }
}
//And you call it as
changeRequireForAll(document.getElementsByName("county1"), false);

That way, you just send your element collection and it will change all instances that matches your query. Even if your collection returns a single element, its still a single-item-array

answered Aug 7, 2019 at 12:04

André Silva

1,1699 silver badges30 bronze badges

4 Comments

Lewis Ross Over a year ago

thanks for answer but nothing seems to be happening. No errors appear but still allows you to submit form without putting anything in the input fields or selecting a collection point (depending on radio button choice)

André Silva Over a year ago

@LewisRoss Try to wrap your HTML in a <form>your html</form> and properly close the element tags, for instance, your input tag isn't closing. One last thing, the first line of your html file should containt <!DOCTYPE HTML>

Lewis Ross Over a year ago

Thanks, your answer does actually work, I just had to fix an issue I had overlooked

Lewis Ross Over a year ago

do you know why when I try to make the select drop down required by doing document.getElementById("collect").required = true; it does not work?

Collectives™ on Stack Overflow

Using javascript to make something required

2 Answers 2

17 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related