0

i have a dynamic form so i have no idea which kind of input there will be every time and i need to handle that, so i've done something like this

<div id="repond-questionnaire" class="modal fade in" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Questionnaire de Test</h4>
            </div>
            <div class="modal-body" id="questionnaire_here">
                <form method="post" id="questionnaire_form">
                    <div class="form-group">
                        <label for="text"><h3>Who are you?</h3></label>
                        <textarea type="text" name="80" class="form-control" rows="3" placeholder="Text..." required="" value=""></textarea>
                    </div>
                    <div class="form-group">
                        <label for="focusedInput"><h3>How old are you?</h3></label>
                        <input type="number" name="81" class="form-control" placeholder="Number..." required="" value="">
                    </div>
                    <div class="form-group">
                        <label for="focusedInput"><h3>What is your email?</h3></label>
                        <input type="email" name="82" class="form-control" placeholder="Email..." required="" value="">
                    </div>
                    <div class="form-group">
                        <label for="focusedInput"><h3>Do you like our website?</h3></label>
                        <div class="radio">
                            <label class="input-lg"><input type="radio" name="83" value="Oui">Oui</label>
                        </div>
                        <div class="radio">
                            <label class="input-lg"><input type="radio" name="83" value="Non">Non</label>
                        </div>
                    </div>
                    <input type="submit" name="sumbit" id="sumbit" value="Sumbit" class="btn btn-success"></form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<script>
        $(document).ready(function() {
            $('#repond-questionnaire').on('click', '#sumbit', function() {
                // here i need to check if all inputs are empty or not 
                //check if they have a valid input or not for security
                //because after i will send everything and upload them to the data base
                    $.ajax({
                        url: "user/sumbit_answers.php",
                        method: "POST",
                        data: $('#questionnaire_form').serialize(),
                        beforeSend: function() {
                            $('#sumbit').val("Sumbiting...");
                        },
                        success: function(data) {
                            $('#questionnaire_form')[0].reset();
                            if (data == 'exit_failure') {
                                alert("something wrong happened");
                            } else {
                                $('#questionnaire_here').empty();
                                $('#questionnaire_here').html(data);
                            }
                        }
                    });

            });
            $('#repond-questionnaire').on('click', '#close', function(event) {
                $('#questionnaire_here').empty();
            });
        });

    </script>

and i'm obliged to do this because somehow the events of the form are blocked ( even though i'm not using event.preventdefault(), my form input are all like this

<input type='$type' name='$row[cid]' class='form-control' placeholder='$type...' required value=''>

2 Answers2

0

Given that required attribute is already set at <input> elements within <form>, you can use .checkValidity() of <form> element.

Additionally you can include pattern attribute with RegExp [^\s]+ to require at least a single character at <input> elements. Adjust RegExp to meet requirement.

<form name="form">
  <input name="input1" type="text" pattern="[^\s]+" required>
  <input name="input2" type="text" pattern="[^\s]+" required>
  <input type="submit">
</form>
<script>
  document.forms.form.querySelector("[type=submit]")
  .onclick = function() {
    console.log(this.form.checkValidity());
    // if (this.form.checkValidity()) { /* all <input> elements have `.value */ }
    // else { /* all <input> elements do not have `.value */ }
  }
</script>
guest271314
  • 1
  • 15
  • 104
  • 177
  • @SafiyZaghbane Not sure what you are attempting to convey? – guest271314 Apr 30 '17 at 19:13
  • `// if (this.form.checkValidity()) { /* all elements have .value */ } // else { /* all elements do have .value */ }` i'm confused about what did you say here .. it seems like you said the same thing in the `if` and `else` –  Apr 30 '17 at 19:39
  • The `else` block is for when all `` elements do not have `.value`. – guest271314 Apr 30 '17 at 20:33
  • i'm sorry but i still can't understand how can i use that –  Apr 30 '17 at 22:02
  • @SafiyZaghbane What do you mean? `javascript` at Answer is one possible solution to your Question.`if(DOMFormElementReference.checkValidity()) {//do ajax stuff}`. Are the `` elements within a `
    ` element? Can you include full `html` at Question? See http://stackoverflow.com/help/mcve
     – guest271314 Apr 30 '17 at 22:06
  • i've add one of the forms which may be in the modal that i'm supposed to handle, should i replace "DOMFormElementReference" by my form id? –  Apr 30 '17 at 22:23
  • 2
    it took me a second to understand your answer but a day to apply it, i've found that i had a problem catching the right form and thats why it didn't work for me, i think your answer is the best for this case –  May 01 '17 at 13:34
0
var text_input=$("[type=text]");
var password_input=$("[type=password");
var radio_input=$("[type=radio]");
var checkbox_input=$("[type=checkbox]");
var select=$("<select>");
var textarea=$("<textarea>");

Then you have to do for loop for each one to check and apply your validation according to that field

Call ajax after validation (the following link will help you) jQuery Form Validation before Ajax submit

Community
  • 1
  • 1
Osama
  • 2,912
  • 1
  • 12
  • 15
  • but maybe there will be much type=text or other types, and can you please show me how would i do that with a for loop? –  Apr 30 '17 at 22:04
  • for(i=0;i – Osama Apr 30 '17 at 22:20
  • This is for example you will get array I'm each field if you have more than one of that type. – Osama Apr 30 '17 at 22:23
  • Okay i'll try and test this solution, but im wondering why without the Ajax function when i click on sumbit it tells me that some fields need to be filled but with Ajax, it ignores that errors and send the data directly to be posted –  Apr 30 '17 at 22:29
  • Because it will do the Ajax call directly in somewhere you have to return false if there is incomplete fields else do Ajax call – Osama Apr 30 '17 at 22:33
  • there is no way i can catch that errors do the ajax only if the form doesn't show any errors ? –  Apr 30 '17 at 22:35
  • You can build the function for validatiton then let this function return false or true according to the validation , and then with in your click call this function if true call Ajax if false don't call Ajax – Osama Apr 30 '17 at 22:38
  • http://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit – Osama Apr 30 '17 at 22:50
  • May be this post will help you try to understand the idea of answers to use it in your way – Osama Apr 30 '17 at 22:51
  • I think this is what i want, i'll accept your answer but please add that to your answer so everyone else who have the same problem will find it –  Apr 30 '17 at 23:00
  • You mean the link ? – Osama Apr 30 '17 at 23:01
  • yeah or what ever you may add –  Apr 30 '17 at 23:06
  • I hope that I helped you – Osama Apr 30 '17 at 23:07