I have a search form with 3 fields, at least one of the first two must be filled, the other is optional

Question

I have a search form with 3 fields, at least one of the first two must be filled, the other is optional

Navigation

#1 by (1 votes)

1

<form>
  <div class="form-group">
    <label for="input1">Input 1</label>
    <input class="form-control input-sm" id="input1" type="text">
  </div>
   <div class="form-group">
    <label for="input2">Input 2</label>
    <input class="form-control input-sm" id="input2" type="text">
  </div>
  <div class="form-group">
    <label for="input3">Input 3</label>
    <input class="form-control input-sm" id="input3" type="text">
  </div>
</form>

I need to use the jQuery Validation Plugin to make sure that the user has filled at least input1 or < input2 and that shows below the message " field 1 and field 2 must be filled ". Is this possible?

jquery

asked by anonymous 10.01.2018 / 01:47

1 answer

What signal to use to trigger methods from a thread in pyGtk? Search for Object Array value

score 1 · Answer 1

To use the plugin, you need to assign a name to the fields:

                                             ↓
<input class="form-control input-sm" name="input1" id="input1" type="text">

And you should load the plugin:

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Thenapplytheplugintoform,settingtherulesforthefields(youcandefineotherrulessuchas:minimumcharacters,whetheritshouldbeanemailetc).BelowIhaveonlydefinedthatbothfieldsarerequiredfills(required):

$().ready(function(){$("form").validate({
      rules: {
         input1: "required",
         input2: "required"
      }
   });
});

Plugin documentation

See it working:

$().ready(function() {
   $("form").validate({
      rules: {
         input1: "required",
         input2: "required"
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script><form><divclass="form-group">
    <label for="input1">Input 1</label>
    <input class="form-control input-sm" name="input1" id="input1" type="text">
  </div>
   <div class="form-group">
    <label for="input2">Input 2</label>
    <input class="form-control input-sm" name="input2" id="input2" type="text">
  </div>
  <div class="form-group">
    <label for="input3">Input 3</label>
    <input class="form-control input-sm" id="input3" type="text">
  </div>
  <button type="submit">Enviar</button>
</form>