Question

我正在尝试在codeigniter视图中进行jquery验证。

当我在名为name="mytestform"的表单中使用“常规表单”验证工作时，但当我使用codeigniter表单类时，我的表单名为name="mytestform1"，它不起作用。我无法弄清楚问题是什么。

这是代码。

 <?php

echo "in v_jquery_validation";

?>
<html> 

<!-- 
http://www.camcloud.com/blog/jquery-form-validation-tutorial 
-->
<head>

<meta charset="utf-8" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>


<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>    



    </head>

    <body>

    <div style="border-style:solid; border-width:2px;border-color:red;min-height:110px;width:220px;">

                  <?php $attributes = array( 'id' => 'mytestform1','name' => 'mytestform');

        echo form_open('','style="width:200px;min-height:100px;border-style:solid;float:right; border-width:1px;border-color:green;"',$attributes);?>

                      <p>
                       <label for="aname">Name:&nbsp;</label>
                      <input name="aname" size="20" />
                       </p>
                       <p>

                      <input class="submit" type="submit" value="Submit"/>
                       </p>
        <?php  echo form_close( ); ?>

      </div>

      <div>
      <form id="mytestform" name="mytestform" method="get"  style="width:200px;min-height:100px;border-style:solid;float:left; border-width:1px;border-color:black;"  action="">
                      <p>
                       <label for="aname">Name:&nbsp;</label>
                      <input name="aname" size="20" />
                       </p>
                       <p>

                      <input class="submit" type="submit" value="Submit"/>
                       </p>
       </form>
</div>

 <script>
$(function() {
   $( "#mytestform" ).validate({
           rules: {
                   aname: {
                           required: true,
                           minlength: 4,
                           maxlength: 20,
                           customvalidation: true
                   }
           },
           messages: {
                   aname: {
                           required: "Dude, enter a name",
                           minlength: $.format("Keep typing, at least {0} characters required!"),
                           maxlength: $.format("Whoa! Maximum {0} characters allowed!")
                   }
           }
   });
   $.validator.addMethod("customvalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Sorry, no special characters allowed"
   );
});


$(function() {
       $( "#mytestform1" ).validate({
               rules: {
                       aname: {
                               required: true,
                               minlength: 4,
                               maxlength: 20,
                               customvalidation: true
                       }
               },
               messages: {
                       aname: {
                               required: "Dude, enter a name",
                               minlength: $.format("Keep typing, at least {0} characters required!"),
                               maxlength: $.format("Whoa! Maximum {0} characters allowed!")
                       }
               }
       });
       $.validator.addMethod("customvalidation",
               function(value, element) {
                       return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
               },
       "Sorry, no special characters allowed"
       );
    });
</script>


    </body>

也许问题与我点击查看来源时看到的异常代码有关：

<body>

    <div style="border-style:solid; border-width:2px;border-color:red;min-height:110px;width:220px;">

                  <form action="http://localhost/hacker_project_v1/c_jquery_validation" style="width:200px;min-height:100px;border-style:solid;float:right; border-width:1px;border-color:green;" method="post" accept-charset="utf-8"><div style="display:none">
<input type="hidden" name="id" value="mytestform1" />
<input type="hidden" name="name" value="mytestform" />
</div>              
                      <p>
                       <label for="aname">Name:&nbsp;</label>
                      <input name="aname" size="20" class= "required" />
                       </p>
                       <p>

                      <input class="submit" type="submit" value="Submit"/>
                       </p>
        </form>     
      </div>

      <div>
      <form id="mytestform" name="mytestform" method="get"  style="width:200px;min-height:100px;border-style:solid;float:left; border-width:1px;border-color:black;"  action="">
                      <p>
                       <label for="aname">Name:&nbsp;</label>
                      <input name="aname" size="20" />
                       </p>
                       <p>

                      <input class="submit" type="submit" value="Submit"/>
                       </p>
       </form>
</div>

Answer 1

你的codeigniter代码错了它应该是这样的

    $attributes = array( 'id' => 'mytestform1','name' => 'mytestform','style'=>'width:200px;min-height:100px;border-style:solid;float:right; border-width:1px;border-color:green;');
    echo form_open('',$attributes);

Answer 2

使用jQuery验证的实例考虑使用html表单验证器，它比jQuery更有效，因为您可以通过禁用浏览器javascript来禁用jQuery的工作。

您只需要在输入字段i中具有和额外属性：e：required="required"

HTML Form Validation

对于服务器端验证，CodeIgniter有一个很棒的库类

CodeIgniter Form Validation

观看部分，

$this->data['first_name'] = array(
   'name'  => 'first_name',
   'id'    => 'first_name',
   'type'  => 'text',
   'class' => 'textbox',
   'value' => $this->form_validation->set_value('first_name', $user->first_name)
);

Valiation Part，

$this->form_validation->set_rules('first_name', 'First Name', 'required|xss_clean');

在codeigniter视图中进行jquery验证不起作用

2 个答案: