-1

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>
Rory McCrossan
  • 306,214
  • 37
  • 269
  • 303
Ashwin Karki
  • 145
  • 2
  • 11
  • That's because the button belongs to the first form only. You will need to call `submit` manually for the first form. – Chris Tapay Feb 07 '19 at 13:44
  • Call [`reportValidity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity) on each form element (*not* jQuery object) and only call your ajax if both return true. – Heretic Monkey Feb 07 '19 at 13:45
  • 1
    What's the point of using 2 forms when you are going to use both as one? – Francisco Garrido Feb 07 '19 at 13:49
  • no i havenot posted the full codes but 2nd form is used for specific purpose so i needed to separate them – Ashwin Karki Feb 07 '19 at 13:50

2 Answers2

1

Since you're using HTML5 validation, use HTML5 DOM methods:

$(document).ready(function() {
  // Add the e (event) argument to your event handler...
  $("#saveBtn").on("click", function(e) {
    // and call preventDefault() on it to prevent submission of the form.
    e.preventDefault();
    let allValid = true;
    $("form").each(function (index, form) {
      allValid = allValid && form.reportValidity();
    });
    if (allValid) {
      /*$.ajax({
        // ajax code to submit
      }); */
    }
  });

});
form { border: 1px solid blue; }
input:invalid { border: 1px solid red; }
<!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>

Things to note:

  • This will show the validation message on the last invalid field on the last form in document order.
  • I added CSS to highlight the form boundaries and invalid fields to make it more obvious.
  • The font element has been deprecated for a long time. Use a span and CSS.
Heretic Monkey
  • 10,498
  • 6
  • 45
  • 102
  • but why my page is refreshing automatically when i click submit button?? can u see and say it? – Ashwin Karki Feb 07 '19 at 14:03
  • That's a different question, but likely because it's submitting the form to the server. See the edited code and [this question's answers](https://stackoverflow.com/q/887923/215552) for more. – Heretic Monkey Feb 07 '19 at 14:07
  • youhave saved my night a big thnks – Ashwin Karki Feb 07 '19 at 14:13
  • can u simply explain me what does this $("form").each(function (index, form) { allValid = allValid || form.reportValidity(); }); code is functioning? – Ashwin Karki Feb 07 '19 at 14:16
  • Sorry, I had the logic wrong there. I've edited the snippet. Basically it gets each `form` element, calls `reportValidity()` on it and remembers the result. If all forms return true, then `allValid` will be true, and you know all of the forms are valid. – Heretic Monkey Feb 07 '19 at 14:19
  • thank you bro for these efforts. i will ask you if i dont understand the logic. :) – Ashwin Karki Feb 07 '19 at 14:36
-1

Don't use HTML5 validation, instead create your own validation methods using Ajax to prevent client side user manipulation.

Using JavaScript to validate the forms before POST as follows: 

<!--Html Form-->
<form name="contact-form" action="" method="post" onsubmit="return checkFields()">
           <label for="nameinput">Name</label>
           <input type="text" name="name">
          <label for="emailinput">Email address</label>
          <input type="email" name="email">
          <label for="textarea-input">Message</label>
          <textarea rows="5" name="message"></textarea>
        <button type="submit" name="contactSubmitBtn">Submit</button>
</form>


function checkFields() {

var x = document.forms["example-form"]["name"].value;
var y = document.forms["example-form"]["email"].value;
var z = document.forms["example-form"]["message"].value;
if (x == "") {
    Response Here
    return false;
}

if (y == "") {
    Response Here
    return false;
}

if (z == "") {
  Response Here!
  return false;
}

}

Clydeston
  • 25
  • 1
  • 8
  • can u show me example please? i am not getting the solution – Ashwin Karki Feb 07 '19 at 13:58
  • Yeah sure, I'm just at work at the minute but I'll post an example shortly. I'm not an Ajax developer but I'll find some code for you. – Clydeston Feb 07 '19 at 14:01
  • Why not use HTML5 validation as a first level of validation? Server-side validation is necessary but can be a back up for those that bypass client-side validation. – Heretic Monkey Feb 07 '19 at 14:02
  • Why waste your time with client side validation when you can validate user input with something like jQuery very easily, HTML5 validation is a lock made of straw. – Clydeston Feb 07 '19 at 14:10
  • Umm... you're doing client-side validation if you do it in jQuery or in plain JavaScript as in your example. Your code takes several lines of code to do what a single `required` attribute in the HTML does for free. – Heretic Monkey Feb 07 '19 at 14:16
  • Apologies, jQery is a better form of client side validation. Also, jQuery does it for free too, it just does it better. HTML validation isn't completely useless, for example if the users browser doesn't support / disabled scripts. But in the modern world HTML validation is essentially worthless. – Clydeston Feb 07 '19 at 14:22