Jquery validation is not working on popup

Question

I am using CodeIgniter, I have a form and fields are Name, Email, and Mobile. I am using Jquery validation but validations are not working I am displaying the fields on the popup.

First I am displaying all the list in the table and there is an action button called as "Edit". If the user clicked on the edit button the popup will open with the respective data. In the popup, Validations are not working. Would you help me out on this issue?

I am using this code

<table id="list">
  <thead>
    <tr>
      <th>Sr. No.</th>
      <th>Name</th>
      <th>Email</th>
      <th>Mobile</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <?php 

        if($MembershipList)
        {
            $n = 1;
            foreach ($MembershipList as $rows)
            {?>
    <tr>

      <td><?php echo $n++;?></td>
      <td><?php echo $rows->name;?></td>
      <td><?php echo $rows->email;?></td>
      <td><?php echo $rows->mobileno;?></td>
      <td>
        <a href="javascript:void(0);" onclick="viewDetails(this)" data-id="<?php echo $rows->membership_id;?>">Edit</a></td>
    </tr>

    <!-- Modal -->
    <div class="confirmation_alert" id="popup_verify-<?php echo $rows->membership_id;?>" style="display: none;">
      <div class="opacity"></div>
      <div class="profile_content p_v_popup">
        <div class="profile_header clearfix">
          <div class="profile_name_pic"> Edit details!!! </div>
        </div>
        <div class="profile_body">
          <?php echo form_open('main_controller/editMember','class="editMember"'); ?>
          <div class="col-lg-12 col-md-12">
            <input type="text" name="name" value="<?php echo $rows->name;?>">
            <input type="email" name="email" value="<?php echo $rows->email;?>">
            <input type="text" name="mobileno" value="<?php echo $rows->mobileno;?>">
            <input type="submit" name="send" value="SUBMIT">

          </div>
          <?php echo form_close(); ?>
        </div>

      </div>
    </div>

    <?php }}?>
  </tbody>
</table>

JQuery validation

$('.editMember').each(function() { 
$(this).validate({
        // Specify the validation rules
        rules: {

          name:{
                 required: true
           },

           email:{
                 required: true,
                 email:true
               },
         mobileno:{
                 number:true,
                minlength:10,
                maxlength: 10
               }

        },
         submitHandler: function(form) {
                          form.submit();
            }

    });
});

Let me know if require popup css. It's just normal popup.

@KrishnaJonnalagadda, Because the action button is an edit button. The user can edit the details after the validation and it will hit the submit button. Is there any issue with it? — user9437856, Dec 26 '18 at 10:18
No, I am not getting any console error. When I clicked on the submit button then my page is refreshing. that means my validation is not working. — user9437856, Dec 26 '18 at 10:23
If I use my popup code outside of the table and validtion is working but I can't use outside of the table. — user9437856, Dec 26 '18 at 10:30
`` - this is inside foreach loop and form id must be unique. make it unique if you want it inside `foreach()` — Bhaskar Jain, Dec 26 '18 at 10:37
@BhaskarJain, I think this is my issue. How can I set unique my id="editMember"? because in the validation script I used the only editMember. — user9437856, Dec 26 '18 at 10:40
I think best way is to write modal code outside loop and open it on click event and put data inside form using ajax. check this if you are using bootstrap modal - https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal — Bhaskar Jain, Dec 26 '18 at 10:46
I am not using bootstrap modal, This is custom popup and Why I am using inside the loop because I when the user clicks on edit button than respective data should be display in the popup. If I use outside of the loop then I will get only the last record of the data in the popup. — user9437856, Dec 26 '18 at 10:49
thats why I suggest to use ajax, you can try this - https://stackoverflow.com/questions/3837166/jquery-load-modal-dialog-contents-via-ajax — Bhaskar Jain, Dec 26 '18 at 10:53
You can use one `id` per page, So use `class` instead of `id`. Also wrap your `$(".classname").validate({` in DOM ready function. — Hardik Solanki, Dec 26 '18 at 11:07
@hardiksolanki, Yes, That I did but still getting the same issue. — user9437856, Dec 26 '18 at 11:08
@user9437856 Can you please update your code in your question? — Hardik Solanki, Dec 26 '18 at 11:10
@hardiksolanki, you really should [read the documentation of the plugin](https://jqueryvalidation.org/reference/#link-validating-multiple-forms-on-one-page) before giving advice. You cannot attach validate to a group selector. In other words, if you use `class` and you have multiple forms on the page with the same class name, the validate plugin will only work on the very first form. The workaround for multiple forms using a class is to wrap `.validate()` inside of a jQuery `.each()`. — Sparky, Dec 26 '18 at 17:02
You'll need to post the relevant HTML markup as **RENDERED** in the browser DOM, not the PHP. — Sparky, Dec 27 '18 at 22:34
You also have invalid HTML. You cannot stick a `div` between `table` tags without putting that content within a table cell. So if your `form` is within broken HTML, the jQuery Validate plugin is probably not going to work at all. Try `debug: true` within the `.validate()` method and look at your console for additional clues. — Sparky, Dec 28 '18 at 17:57

Naveen K · Answer 1 · 2018-12-26T20:45:30.710

0

Use class name for the form instead of id

<?php echo form_open('main_controller/editMember','class="formClass"'); ?>

and make your validation for the class like

$(".formClass").each(function() { 
    $(this).validate({
       // rules
    });
});

edited Dec 26 '18 at 20:45

answered Dec 26 '18 at 10:44

Naveen K

859
4
14
29

[Not quite. When using `class` with multiple forms, you must use a jQuery `.each()`.](https://jqueryvalidation.org/reference/#link-validating-multiple-forms-on-one-page) See: https://jqueryvalidation.org/reference/#link-validating-multiple-forms-on-one-page – Sparky Dec 26 '18 at 17:17
@Sparky, Thanks for the update. I tried above answer but still getting the same issue. I update the question. – user9437856 Dec 27 '18 at 05:14
created a simple fiddle with few forms and validation seems working fine. fiddle url : https://jsfiddle.net/4fjq5daL/4/ @user9437856 – Naveen K Dec 27 '18 at 10:15
@Naveen, Thanks for the answer. You have created 3 forms in the jsfiddle. That is not my issue. I have a table and inside the table, I am using foreach to fetch the data from the database. If I use my popup code outside of the table than validations is working but if I use inside of the table then it's not working. – user9437856 Dec 27 '18 at 10:33
Yes I tried it and the form validation not working inside the table because of invalid HTML. Form always passes validation even when there are empty fields. But you can use required as an attribute to the input element and it will work. check this fiddle https://jsfiddle.net/4fjq5daL/9/ – Naveen K Dec 27 '18 at 11:05

score -1 · Answer 2 · answered Dec 26 '18 at 10:30

-1

Change <input type="submit" name="send" value="SUBMIT"> to <button class="button" name="send">SUBMIT</button>. Input type="submit" submits the form and refreshes the page before validation in your case.

answered Dec 26 '18 at 10:30

Mukhammadsher

182
3
21

Thanks for the answer but it's not working. My validation is working if I add my popup code outside of the table. – user9437856 Dec 26 '18 at 10:35

Hardik Solanki · Answer 3 · 2018-12-26T11:31:50.100

-1

You need to change your jquery code like below.

$(document).ready(function(){  <-- Wrap function in document ready when DOM ready.
    $('.editMember').submit(function() {  <-- Call validation on form submit.
       $(this).validate({   <-- Use this for validate current open form.
            // Specify the validation rules
            rules: {

                name:{
                     required: true
                },

                email:{
                     required: true,
                     email:true
                },
                mobileno:{
                    number:true,
                    minlength:10,
                    maxlength: 10
                }
            },
            submitHandler: function(form) {
                form.submit();
            }

        });
    });
});

EDIT : You need to add required into your input fields.

<input type="text" name="name" value="<?php echo $rows->name;?>" required>
<input type="email" name="email" value="<?php echo $rows->email;?>" required>
<input type="text" name="mobileno" value="<?php echo $rows->mobileno;?>" required>

edited Dec 26 '18 at 11:31

answered Dec 26 '18 at 11:18

Hardik Solanki

3,153
1
17
28

The same issue, If I click on the submit button then it submitting without adding the data. Currently, my fields are empty. – user9437856 Dec 26 '18 at 11:27
Require is working but I don't want to use that. I have to use Jquery validation. If I use require then there is no use of the jquery validation. – user9437856 Dec 26 '18 at 11:36
[Absolutely not](https://stackoverflow.com/tags/jquery-validate/info). You are not supposed to call `.validate()` on the submit event. The `.validate()` method is used for initialization of the plugin on the form, and once properly initialized, it automatically captures the click of the submit button. – Sparky Dec 26 '18 at 17:06
And you **do NOT** need to add the `required` attribute to the fields when the `required` rule is already declared inside of the `rules` object of `.validate()`. Totally unnecessary and redundant. – Sparky Dec 26 '18 at 17:07
Submit your using form "#id" and add "e.prevendefault()" function to stop page from refresh. Also you can try below code "" – Rakhi Prajapati Dec 27 '18 at 05:49
@RakhiPrajapati, If I use id then the id will display multiple times because my form is inside the loop. can you share the example of your code ? – user9437856 Dec 27 '18 at 09:12

Jquery validation is not working on popup

3 Answers3