Question

我正在使用CodeIgniter，我有一个表单，并且字段为Name, Email, and Mobile。我正在使用Jquery验证，但是验证不起作用，我在弹出窗口上显示字段。

首先，我在表格中显示所有列表，并且有一个名为“编辑”的操作按钮。如果用户单击编辑按钮，则弹出窗口将打开并带有相应的数据。在弹出窗口中，验证不起作用。您能帮我解决这个问题吗？

我正在使用此代码

<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验证

$('.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();
            }

    });
});

让我知道是否需要弹出CSS。这只是正常的弹出窗口。

Answer 1

使用类名代替表单

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

并像这样对类进行验证

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

Answer 2

将<input type="submit" name="send" value="SUBMIT">更改为<button class="button" name="send">SUBMIT</button>。输入type="submit"提交表单并刷新页面，然后根据您的情况进行验证。

Answer 3

您需要像下面那样更改您的jquery代码。

$(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();
            }

        });
    });
});

编辑：：您需要在输入字段中添加required。

<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>

jQuery验证不适用于弹出窗口

3 个答案: