CODEWITHSUNDEEP
jqueryhtmlformsvalidation
K.Z
K.Z

Reputation: 5075

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

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>

Upvotes: 2

Views: 21245

Answers (4)

Shuhad zaman
Shuhad zaman

Reputation: 3390

you can use in this format 

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

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

Upvotes: 0

Alyssa Ross
Alyssa Ross

Reputation: 2169

You can use the OR (|) operator.

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

Upvotes: 19

saeid ezzati
saeid ezzati

Reputation: 249

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>

Upvotes: 0

Joe Enos
Joe Enos

Reputation: 40393

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

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

Upvotes: 2

Related Questions