Linked Questions

Popular Questions

I have two different forms with id newForm and oldForm . But when i click on submit button then html5 validation is only shown on input fields of 'newForm'.The html5 validation is not appearing in oldForm ,as i have kept the required field in input fileds of oldForm. How can i validate these two different forms when i click Submit button ? I need the html5 valdiation in both forms but the validation is appearing in seconnd form but not in first form.

$(document).ready(function() {
  $("#saveBtn").on("click", function() {
    console.log("form submitted");

    /*$.ajax({
      // ajax code to submit
    }); */
  });

});
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container" style="padding-bottom: 20px;">
    <h2>Pre Assessment</h2>
    <div class="card">
      <div class="card-body">
        <div class="col-md-12" style="float: none;">
          <form id="oldForm">
            <div class="row">
              <div class="form-group col-md-6 assess">
                <div class="col-md-12">
                  <font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
                  </font>
                  <select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
                    <option value="" selected disabled hidden>Choose here</option>
                    <option value="appeal">Appeal</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
              <div class="form-group col-md-6">
                <div class="row">
                  <div class="col-md-12 pnbp" style="margin-bottom: 10px;">
                    <font face="preeti" size="5">
                      k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
                    <input type="text" class="form-control" id="appealId" name="appealId" required />
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 orIf" style="margin-bottom: 10px;">
                    <font face="preeti" size="5">cGo</font>
                    <input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
                  </div>
                </div>
              </div>
            </div>
            <!-- for other two field -->
            <div class="row">
              <div class="form-group col-md-3">
                <div class="col-md-12" style="margin-bottom: 10px;">
                  (B.S.)
                  <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
                </div>
              </div>
              <div class="form-group col-md-3">
                <div class="col-md-12" style="margin-bottom: 10px;">
                  <font face="preeti" size="5">
                  </font>(A.D.)
                  <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
                </div>
              </div>
              <div class="form-group col-md-3">
                <div style="margin-bottom: 40px;">
                  (B.S)
                  <input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
                </div>
              </div>
              <div class="form-group col-md-3">
                <div style="margin-bottom: 40px;">
                  (A.D)
                  <input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
                </div>
              </div>
            </div>
          </form>
          <form id="newForm">
            <div id="formContainer" class="col-md-12" style="float: none;">
              <div style="margin-bottom: 30px;">
                <div class="form-group row">
                  <div class="col-md-1"></div>
                  <div class="col-md-4">
                    <label>Reason</label>
                  </div>
                  <div class="col-md-2">
                    <label>Amount</label>
                  </div>
                  <div class="col-md-2">
                    <label>Penalty</label>
                  </div>
                  <div class="col-md-1">Total</div>
                  <div class="col-md-2">Action</div>
                </div>
                <div class="customs-table row">
                  <div class="col-md-1">
                    <label>Customs</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control customReason" required />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div class="vat-table row">
                  <div class="col-md-1">
                    <label>VAT</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control vatReason" name="vatReason" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div class="excise-table row">
                  <div class="col-md-1">
                    <label>Excise</label>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control exciseReason" name="exciseReason" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
                  </div>
                  <div class="col-md-2">
                    <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
                  </div>
                  <div class="col-md-1">
                    <span class="sum">0</span>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="add">+</button>
                    <button type="button" class="remove">-</button>
                  </div>
                </div>
                <div id="a"></div>
                <div class="col-md-12 pull-right">
                  <label>Total:</label>&nbsp;<b><span id="tot">0</span></b>
                </div>
              </div>
              <button id="saveBtn" class="btn btn-success pull-right">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Related Questions