JQuery add required property if dropdown selected value is 1

Question

I had have a form with dropdowns and other fields that may be tagged as .related and if the dropdown value selected is 1 it displays the other fields. This works well but I want to add class "required" to their input classes. I tried the code below but it does not work.

    <div class="related row">
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label" for="OptionId">Pay by</label>
                <select class="form-control input-lg" id="OptionId" name="OptionId" required="required">
                    <option value="">-- Choose --</option>
                    <option value="1">Transfer</option>
                    <option value="2">Cheque</option>
                </select>

            </div>
        </div>
        <div class="row">
            <div class="requiredfields">

                <div class="col-md-offset-05 col-md-3">
                    <div class="form-group">
                        <label class="control-label" for="AcctName">Account Name</label>
                        <input class="form-control input-lg" data-val-requiredif="Account Name Required" data-val-requiredif-expression="&quot;OptionId==1&quot;"  id="AcctName" name="AcctName" type="text" value="" />

                    </div>
                </div>

                <div class=" col-md-offset-05 col-md-2">
                    <div class="form-group">
                        <label class="control-label" for="Bank">Bank Account</label>
                        <input class="form-control input-lg" data-val-requiredif="Account Number Required" data-val-requiredif-expression="&quot;OptionId==1&quot;" id="Bank" name="Bank" type="text" value="" />

                    </div>
                </div>

            </div>
        </div>
    </div>

I have this code below which was initially customised for only one field. But I now want to have something generic and reusable that will meet the requirements based on the markup I have explained above.

var showHideFieldsSelect = function (el, val) {
    el.each(function () {
        var select = $(this).find("select").first(),
            dVersion = $('[name=Version]');
        select.change(function () {
            var thisOption = $(this);
            if (thisOption.find(":selected").val() === val) {
                thisOption.closest(".related").find(".requiredfields").show();
                thisOption.closest(".related").find(".sub").hide();
            } else {
                thisOption.closest(".related").find(".requiredfields").hide();
            }
            thisOption.val() ? id.fadeIn() : id.hide();

            console.log(thisOption.find(":selected").val())

            thisOption.find(":selected").val() === "1" ? dVersion.addClass('required') : dVersion.removeClass('required');

        }).trigger("change");
    });
}
showHideFieldsSelect(related, '1');

I need help because my javascript library has become messed up. Preferably there is a default fluent validation which is failing to trigger but it puts the required markup with fields example below

 "data-val-requiredif="Account Name Required" data-val-requiredif-expression="&quot;OptionId==1&quot;"

It will be best if a proposed solution will pick these elements and add the required attribute to the input field.I have tried a lot of options to make this default validation work but to no avail. So now I have to do a hack.

That is to say It checks the Id value of selected optionId say if is 1 and add the class "required" to all related fields that have markup "data-val-requiredif-expression=""OptionId==1""

Fiddle Setup

Ben Temple-Heald · Accepted Answer · 2017-02-07 14:18:12Z

1

I have updated your Fiddle to include JQuery, and pass the array of objects to the function call.

A working fiddle with the mods I think you want, if you select 1 on the dropdown the fields are required, else they are not.

https://jsfiddle.net/hg4w3cxy/2/ -- Uses your Javascript, with the set property to Required.

var items = $('input[data-val-requiredif-expression*="OptionId==' + val + '"]');
items.prop('required',thisOption.find(":selected").val() === val);

https://jsfiddle.net/hg4w3cxy/3/

Change add:

    select.change(function () {
        var thisOption = $(this);
        var related = thisOption.closest(".related");
        var items = $('input[data-val-requiredif-expression*="OptionId==' + val + '"]');            

        if (thisOption.val() === val) {             
          related.find(".requiredfields").show().addClass("required");
          related.find(".sub").hide();
        }
        else {
            related.find(".requiredfields").hide();
        }
        items.prop('required',thisOption.val() === val);
    }).trigger("change");

Dynamic Expression passed into function: https://jsfiddle.net/ab6e7k5d/

Line 1
var showHideFieldsSelect = function (el, val, matchingExpression) {

Line 21
showHideFieldsSelect($('.related'), '1','OptionId');

Dynamic Expression as Attribute on .Related https://jsfiddle.net/tyt5pmx5/

Line 8 - 9
var matchingExpression = related.attr("data-matching-expression")
var items = $('input[data-val-requiredif-expression*="'+matchingExpression+'==' + val + '"]');

Dynamic Expression passed into function with Set Class on Required Field: https://jsfiddle.net/ab6e7k5d/5/

var thisOption = $(this);
var related = thisOption.closest(".related");            
var items = $('input[data-val-requiredif-expression*="'+matchingExpression+'==' + val + '"]'); 
var required = thisOption.val() === val;

related.find(".requiredfields").toggle(required);
related.find(".sub").toggle(!required);            
items.prop('required',required).toggleClass("required",required);

edited Feb 7, 2017 at 14:18

answered Feb 6, 2017 at 16:33

Ben Temple-Heald

7082 gold badges6 silver badges16 bronze badges

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

6 Comments

Diin Over a year ago

Thanks I looked at the fiddle and it works. but the difficulty I have is I have other dropdowns which have different trigger ids apart from OptionId. Are you able to find the triggerid dynamically?

Ben Temple-Heald Over a year ago

It would need passing in on the initial function or as a property on the related row, I will update the answer in a few minutes , do you have that information when you create the form?

Diin Over a year ago

I very much appreciate your time for helping sort me out.

Diin Over a year ago

I just realised the required class is added to the requiredfields div instead of the field input class can you update code please

Ben Temple-Heald Over a year ago

You can just add .toggleClass("required",thisOption.val() === val ) after the prop set on line 9. Remove your other set class so that the Div doesn't get set.

|

Collectives™ on Stack Overflow

JQuery add required property if dropdown selected value is 1

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related