CODEWITHSUNDEEP
jqueryhtmlvalidationdynamic
Sunny
Sunny

Reputation: 932

Validate HTML5 form on making form fields mandatory dynamically

I've a bootstrap form which has a few fields. By default, the 1st and the 2nd fields are mandatory.

Now, if the 3rd field is filled out, the 4th one becomes mandatory. Similarily, if the 4th field is filled out, the 3rd one becomes mandatory.

However, if both 3rd & 4th fields are not filled out, they're not mandatory. I'm also using the HTML5 form validation here.

Here's my code :

<!doctype html>
<html>
    <head>  
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(function(){

                $("#myForm").submit(function(){
                    checkAll();

                    return false;
                })

            });

            function checkAll() {
                if(($('#comp').val()!== "") || ($('#weburl').val()!=="")) {
                    $('#comp').prop('required',true);
                    $('#weburl').prop('required',true);

                }
                else {
                    $('#comp').prop('required',false);
                    $('#weburl').prop('required',false);
                }
            }
        </script>
    </head>
    <body>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button>

        <div id="myFormModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add details</h4>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" id="myForm" name="contact" action="#">
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="dor">Date of Registeration:</label>
                    <div class="col-sm-8">
                      <input type="date" class="form-control" id="dor" name="dor" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="name">Name:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-sm-3" for="comp">Company:</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="comp" name="comp">
                    </div>
                  </div>
                  <div class="form-group">
                   <label class="control-label col-sm-3" for="weburl">Website:</label>
                    <div class="col-sm-8">
                      <input type="url" class="form-control" id="weburl" name="weburl">
                    </div>
                  </div>
                  <hr />
                  <div class="form-group">        
                    <div class="col-sm-offset-3 col-sm-3">
                      <button  class="btn btn-primary btn-sm">Save</button>
                    </div>
                    <div class="col-sm-3">
                      <button type="reset" class="btn btn-primary btn-sm">Reset</button>
                    </div>
                    <div class="col-sm-3">
                      <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 784

Answers (1)

Bart W
Bart W

Reputation: 137

You could attach an event handler to the elements and do this before you even submit the form. Something like:

$("#comp, #weburl").on('input', function() {
  if($("#comp").val() || $("#weburl").val()) {
    $("#comp").prop('required', true);
    $("#weburl").prop('required', true); 
  }
  else {
    $("#comp").removeAttr('required');
    $("#weburl").removeAttr('required');
  }
});

https://jsfiddle.net/yscy8Lrr/1/

(Ignore the code to change the textbox color, I just added it to show that the required property is in fact being added and removed)

This will make both #comp and #weburl required when either has a value, and not required when both contain no characters.

Side note: If you're using HTML5 required and want cross-browser support, you should also call the checkValidity() function on the form when it is submitted, since Safari does not support the required attribute.

Upvotes: 1

Related Questions