IE browser - Select Box - JQuery v1.11.1 - improper validation

Question

I have a select box called "transactionType" which enables/disables another select box "itemPrice". Both the items are required fields.

Everything is fine in chrome. But in IE, when we select the first option "Please Select" with value "", the validation is not working. it seems to accept the value without updating in red text as "required". I tried different approaches. When i call the $(this).valid() the "TransactionType" updates properly but my "itemPrice" does not get enabled or disabled appropriately.

Like in the example here jQuery select box validation, i can't do it on "Submit". I have to do it as they change "selection" in select box.

$(document).ready(function () {

  $("#TransactionType").validator({ // initialize the plugin
      rules: {
          TransactionType: {
              selectcheck: true
          }
      }
  });

  jQuery.validator.addMethod('selectcheck', function (value) {
      return (value != '');
  }, "You must choose an item from the list.");
  
  // set up "transaction type" change event
  $(this).find ('#TransactionType').change(function () {

        //Show or Hide SalesPrice depending on TransactionType
        UpdateSalesPrice($orderEntryForm);
        event.srcElement.blur();
    });

});


function UpdateSalesPrice($form)
{
    var transtype = $form.find("#TransactionType").val().toLowerCase();
    // Selling Price field is irrelevant for Refinance transaction
    // Thus disable the control and stop validating
    if ($("#SellingPrice").length > 0) {

        var parent = $("#SellingPrice").parent();
        var child2 = parent.find("i").eq(1);

        if (transtype == "refinance" || transtype == "equity") {
            $("#SellingPrice").prop("disabled", true);
            $("#SellingPrice").attr("data-validate", false);
            $("#SellingPrice").val('');

            if (child2.length > 0 && document.getElementById("SellingPrice").required)
                child2.removeClass();
        }
        else {
            $("#SellingPrice").prop("disabled", false);
            $("#SellingPrice").attr("data-validate", true)
            if (child2.length > 0 && document.getElementById("SellingPrice").required)
                child2.removeClass().addClass('fa fa-asterisk');
        }
        // Reset validation of Transaction Information section
        var txControls = $("#SellingPrice");
        txControls.validator("update");
        txControls.validator("validate");
    }
}

<div class="row" id="transactionInformation_row_10">
  <label class="col-xs-2 control-label ta-r" for="_TransactionType">Transaction Type</label>
  <div class="col-sm-4 col-xs-10 form-group has-error has-danger">
    <div class="input-group"><select name="TransactionType" class="form-control" id="TransactionType" required="" data-bind="value:TransactionType">
      <option value="">Select Transaction Type</option>
      <option value="Purchase">Purchase</option>
      <option value="Other">Foreclosure</option>
      <option value="Refinance">Refinance</option>
      <option value="Equity">Equity</option>
      </select><span class="input-group-addon"><i class="fa fa-asterisk" aria-hidden="true"></i></span>       </div>
    <div class="help-block with-errors"><ul class="list-unstyled"><li>You must choose an item from the list</li></ul>
    </div>
  </div>
</div>
<div class="col-sm-4 col-xs-10 form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-usd" aria-hidden="true"></i></span>
    <input name="SellingPrice" disabled="" class="form-control currency" id="SellingPrice" required="" type="text" placeholder="" data-bind="value:SellingPrice" data-validate="false">
    <span class="input-group-addon"><i aria-hidden="true"></i></span>
  </div>
  <div class="help-block with-errors">&nbsp;</div>
</div>

I am new to this project and also to jquery. i might be doing something silly. just can't figure out what. it looks like jquery 2.2.3 and jquery.validaion 1.11.1 NuGet packages are installed in the project.
any ideas are greatly appreciated. Thanks.

score 0 · Answer 1 · answered Aug 20 '18 at 21:43

The problem is that the mere presence of the 'disabled' attribute causes an input to be disabled. The browser engines do not look at the value of 'disabled'. So, instead of changing disabled from true to false, delete the attribute entirely when you want the field to be enabled.

Also, this stuff is a lot easier if you just drop in AngularJS. You can turn on and off fields based other fields' values (or even just scoped values) without doing it via code. It's all done through simply adding attributes to your tags. Check out the NetNinja on Youtube for some quick tutorials.

IE browser - Select Box - JQuery v1.11.1 - improper validation

1 Answers1