I want modal box not open when compulsory fields not fill

Put required attribute on the inputs that should use them. Then in your JavaScript:

const form = document.getElementById('contact_form');if(form.reportValidity()) {    // Execute your modal code somewhere in here    // Get your form data by wrapping the form element in jQuery    const formData = $(form).serialize();}

EDIT:

If you want to handle the errors yourself you should use novalidate on your form

<form class="well form-horizontal"   id="contact_form" autocomplete="off" novalidate>

Then

const isValid = form.checkValidity() // returns true or falseconst formData = new FormData(form);const validationMessages = Array  .from(formData.keys())  .reduce((acc, key) => {    acc[key] = form.elements[key].validationMessage    return acc  }, {});

Code taken from https://itnext.io/back-to-the-browser-form-validation-d32dd01802c0

You are doing easily by add "required" attribute to input fields. Remove data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false". These are used for direct open the modal. You should check the form on click submit button.

<form class="well form-horizontal"   id="contact_form" autocomplete="off"><fieldset><legend><center><h2><b>Registration Form</b></h2></center></legend><br><div class="form-group">  <label class="col-md-4 pd-r control-label">firstname</label>    <div class="col-md-4 pd-r inputGroupContainer">  <div class="input-group">  <input  name="first_name" id="first_name"  class="form-control tboxs"  type="text" minlength="4" required>    </div>  </div></div><div class="form-group">  <label class="col-md-4 pd-r control-label">city</label>     <div class="col-md-4 pd-r inputGroupContainer">    <div class="input-group">    <input name="city" id="city" placeholder="Solapur" class="form-control tboxs" value="Solapur" type="text" readonly required>    </div>  </div></div><div class="form-group">  <label class="col-md-4 pd-r control-label">village</label>     <div class="col-md-4 pd-r inputGroupContainer">    <div class="input-group">   <input name="village" id="village" class="form-control tboxs" type="text" required>    </div>  </div></div><div class="form-group">  <label class="col-md-4 pd-r control-label"></label>  <div class="col-md-4 pd-r"><br>    <button  type="submit" value="submit" class="btn-theme-colored btn">SUBMIT <span class="glyphicon glyphicon-send"></span></button>  </div></div></fieldset></form>

Jquery Part:

$('#submit').click(function(){   if($('#first_name').val()==''){      alert('Name can not be left blank and atleast 4 char long');      return false;    }   if($('#city').val() == ''){      alert('City can not be left blank');      return false;   }   if($('#village').val() == ''){      alert('village can not be left blank');      return false;   }   $('#exampleModal').modal('show');   return true;});

After fill your data on modal you can fire event for make ajax call. I think it helps.