Skip to content
Advertisement

Form validation doesn’t works in bootstrap

I have a “little” problem with my bootstrap modal. I’m loading into myModal a form created in temp.php file. Then I try to send this form to the save.php file using AJAX. Everything is OK but form validation doesn’t works ( didn’t checked if is empty before submitting the form). If I hard coding my form in the modal-body everything works fine. The problem occurs only when I load this form from external .php file… Any suggestions how to make form validation works in the right way? Thanks in advance!

My index.php file:

JavaScript

This is my temp.php file:

JavaScript

Advertisement

Answer

xmlhttprequest IS ajax. $.ajax is the same as xhttp….

element.load(url) does ajax too

  1. Replace reguired with required (spelling)
  2. give the required fields an empty value
  3. replace $("#save").click(function(event) { with
    $("#modal-body").on("submit","#myForm", function(event) {
    because you need to submit the form to execute the validation – the e.preventDefault stops the submission so you can do the ajax
  4. Replace
JavaScript

with this jquery

JavaScript

and change the button from

<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" onClick="fillModal('temp.php', 'modalTitle');">Open modal</button>

to

<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-title="modalTitle" data-url="temp.php">Open modal</button>

JavaScript
JavaScript
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement