using mutiple patterns in <input> html 5 form for validation

Question

I have requirement for my input in the form... my valid values are number or "No Min" or "No Max". now I can use pattern for string value or number but not both... my question is how can i use multiple pattern in html 5 input tag... I am also using jQuery...

 <form id="form_searchProperty"  >
  <div class="criteria_block">
   <span><label class="search_form_Label" for="propbath">Bathroom</label></span>
     <span>
          <input id="input_propbath_min" value="No Min" pattern ="\d+" name="Min_Bathrooms" style="width:75px;"/>
          <input id="input_propbath_max" value="No Max" pattern ="\d+" name="Max_Bathrooms" style="width:75px;" />
      </span>
    </div>
  </form>

You are already using the select element for this, which restricts what a user can choose by a dropdown. I don't see the benefit of using the pattern attribute in this case. — Mat Richardson
– Mat Richardson, Commented Jun 6, 2013 at 19:21
so sorry Mat, i have pasted wrong code.... is my using input!!! see code above thanks — K.Z
– K.Z, Commented Jun 6, 2013 at 19:29
Can you instead make the field not required and accept an empty input as "no min"/"no max"? — Tom Smilack
– Tom Smilack, Commented Jun 6, 2013 at 19:31
no is because No Min tag is for user to show, by putting 0, many may not understand... although No Min, I am taking as 0 once the form is submitted ... — K.Z
– K.Z, Commented Jun 6, 2013 at 19:46

Mamun · Accepted Answer · 2018-05-07 06:44:10Z

19

You can use the OR (|) operator.

pattern="(No M(in|ax))|\d+"

edited May 7, 2018 at 6:44

Mamun

69k9 gold badges51 silver badges62 bronze badges

answered Jun 6, 2013 at 19:34

Alyssa Ross

2,16916 silver badges26 bronze badges

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

Comments

Joe Enos · Accepted Answer · 2013-06-06 19:33:42Z

2

Since your pattern is a regular expression, your regex pattern can have an either/or in it:

<input pattern ="(\d+)|(No Min)">

answered Jun 6, 2013 at 19:33

Joe Enos

40.6k11 gold badges86 silver badges144 bronze badges

Comments

saeid ezzati · Accepted Answer · 2013-06-06 19:46:06Z

you can use regular expression test instead of pattern property of input element.

see this:

<script src="jquery-1.8.0.min.js"></script>
<script>
$(function(){

    $('form#form_searchProperty').submit(function(){
        var pat1 = /\d+|no min/i, pat2 = /\d+|no max/i;
        if (!pat1.test($('#input_propbath_min').val()) && !pat2.test($('#input_propbath_min').val()))
        {
            return false;
        }
    });

});
</script>

<form id="form_searchProperty"  >
    <div class="criteria_block">
        <span><label class="search_form_Label" for="propbath">Bathroom</label></span>
        <span>
            <input id="input_propbath_min" value="No Min" name="Min_Bathrooms" style="width:75px;"/>
            <input id="input_propbath_max" value="No Max" name="Max_Bathrooms" style="width:75px;" />
        </span>
    </div>
    <input type="submit" >
</form>

Shuhad zaman · Accepted Answer · 2019-05-01 07:50:35Z

0

you can use in this format

<input type="text" pattern="10453|10457" />

Add as many number as you want with the | sign.

answered May 1, 2019 at 7:50

Shuhad zaman

2,90034 silver badges33 bronze badges

Collectives™ on Stack Overflow

using mutiple patterns in <input> html 5 form for validation

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related