JQuery Validate select element not including default value

Question

I am trying to validate a Select element as follows:

<select name="block_name" id="block-name">
 <option value="">Select Block</option>
 <option value="blockA">Block A</option>
 <option value="blockB">Block B</option>
</select>

which normally wouldn't be a problem if the rule was as Follows:

rules: {
 block_name: {
   required: true
 }
}

As I would just add class="required" to the select element. But I am using a function in the rule as follows:

rules: {
 block_name  {
  required: function(element) {
   return $("#blocks").val() >= 2;
        }
    }
}

which uses the following hidden field which has a data binding that determines the value:

<input type="hidden" name="blocks" id="blocks" value="<?php echo $row_rsCurrentUser['blocks']; ?>">

When using this function in the rule the class="required" does not work thus excepting the default option element <option value="">Select Block</option>

How can I get this to validate but not except the default option as a selection?

Thanks in advance

I'm not sure I understand your answer @Shahaji Deshmukh. I am not trying to validate an input box. — Steve Joiner, Sep 28 '18 at 13:38
Will you please look at [here](https://stackoverflow.com/questions/2901125/jquery-validate-required-select)? Is it same as you want? — saumil_, Sep 28 '18 at 13:52
I don't understand the problem. What does `class="required"` have to do with the rule? — Barmar, Sep 28 '18 at 14:31
Sorry @Barmar I probably wasn't clear in my post. I meant I would use the `required` class instead of the rule which would validate the select element without excepting a blank value for an `option` — Steve Joiner, Sep 28 '18 at 15:11

score 1 · Accepted Answer · answered Sep 28 '18 at 15:20

1

I think you can define a new class rule, rather than using the built-in class="required".

$.validator.addClassRules("required_block2", {
    required: function(element) {
        return $("#blocks").val() >= 2;
    }
});

Then use class="required_block2" on these elements.

answered Sep 28 '18 at 15:20

Barmar

741,623
53
500
612

`addClassRules` is meant for creating a compound rule. Otherwise, you can just create a custom rule with `addMethod` and directly assign it using a class. Ex: create a custom method called `myRule` and assign using `class=“myRule”` – Sparky Oct 01 '18 at 15:05
@Sparky The advantage of using `addClassRules` seems to be that you can easily refer to an existing rule. While it's normally for creating rules that combine multiple rules, it extends easily to the degenerate case of one rule with a parameter like this. – Barmar Oct 01 '18 at 15:09
Sorry for late response to this @Barmar. This works perfectly, many thanks – Steve Joiner Oct 16 '18 at 13:11

rafaelcastrocouto · Answer 2 · 2018-10-01T16:10:04.530

0

You can add all kind of validation in your function:

$("#myform").validate({
  debug: true,
  rules: {
    block_name:  {
      depends: function(element) {
        var blocksIsValid = (Number($("#blocks").val()) >= 2);
        var block_nameIsValid = ($("#block_name").val() !== "");
        $('#output').text('#blocksIsValid:'+blocksIsValid+', #block_nameIsValid: '+block_nameIsValid);
        return blocksIsValid && block_nameIsValid;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="myform">
  <select name="block_name" id="block_name" required>
    <option value="">Select Block</option>
    <option value="blockA">Block A</option>
    <option value="blockB">Block B</option>
  </select>
  <input id="blocks" name="blocks" value=""/>
  <input type="submit" value="Validate"/>
  <p id="output"></p>
</form>

If you are not familiar with JS conditions, here are a few tips:

With || (same as OR) at least one of the conditions must be true;

With && (same as AND) all conditions must be true.

With ! (same as NOT) your condition will be flipped (true becomes false, false becomes true).

Read more https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals

edited Oct 01 '18 at 16:10

answered Sep 28 '18 at 13:49

rafaelcastrocouto

11,781
3
38
63

1

I don't understand this. The `required` rule tells it to check whether the input is empty. What sense does it make to check the input itself inside the conditional for whether the rule should be enabled? – Barmar Sep 28 '18 at 14:32
thanks for your answer @rafaelcastrocouto. I understand what you've explained regarding the use of `||` and `&&` but I don't understand how I can utilise these to achieve validation but excluding the default option value. – Steve Joiner Sep 28 '18 at 14:45
1

Maybe you can use something like this: Condition 1 = ($("#blocks").val() >= 2) ... Condition 2 = ($("#block-name").val() !== ""). You need them both to be valid, so: Condition 1 && Condition 2. Try the code on the answer, I've updated it. – rafaelcastrocouto Sep 28 '18 at 14:56
I tried that @rafaelcastrocouto but didn't work unfortunately. – Steve Joiner Sep 28 '18 at 15:27
1

"Didn't work" - what do you mean? there was an error? the validation didn't work as expected? I need more info to help you. – rafaelcastrocouto Sep 28 '18 at 20:47
apologies @rafaelcastrocouto. The validation doesn't work as expected. when using your suggested rule/function setup, It simply accepts the default option element ``. – Steve Joiner Oct 01 '18 at 14:10
1

Did you remove the `option` id? Because this code `$("#block-name").val() !== ""` does not allow an empty value, but it requires the id. I'm gonna build a full demo here https://codepen.io/rafaelcastrocouto/details/OBVaLx/ – rafaelcastrocouto Oct 01 '18 at 14:40
1

Thanks for your input to this @rafaelcastrocouto. Difficult to choose which option to go with. I went with Barmar's suggestion as I felt it was a cleaner approach. – Steve Joiner Oct 16 '18 at 13:13

JQuery Validate select element not including default value

2 Answers2