Question

我想创建一个包含如下错误消息的表单：

My Form

<div class="box-content">   
<?php
$properties = array('class' => 'form-horizontal', 'id' => 'form1');
echo form_open("control_perbaikan/userRequest", $properties);
?>

<fieldset>
    <div class="control-group">
        <label class="control-label">Kind Of Complaint :</label>
        <div class="controls" id="chekboxes">
            <label class="checkbox inline"><input type="checkbox" name="request[]" id="Login" value="Login" > Login </label>
            <label class="checkbox inline"><input type="checkbox" name="request[]" id="Printer" value="Printer"> Printer </label>
            <label class="checkbox inline"><input type="checkbox" name="request[]" id="Monitor" value="Monitor"> Monitor</label>
            <label class="checkbox inline"><input type="checkbox" name="request[]" id="Computer" value="Computer"> Computer</label>
            <label class="checkbox inline"><input type="checkbox" name="request[]" id="Network" value="Network"> Network</label>
            <label class="checkbox inline"><input type="checkbox" name="request[]" id="Other" value="Lain-lain" > Other</label> 
        </div>
    </div>

    <div class="control-group hidden-phone">
        <label class="control-label" for="Keluhan" >Description: </label>
        <div class="controls">
            <textarea class="cleditor" name="keluhan" id="keluhan" rows="3"></textarea>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary" id="submit"  >Submit</button>
        <button type="reset" class="btn">Cancel</button>
    </div>
</fieldset>
<?php echo form_close(); ?>

我尝过这样的话：JFIDDLE。但我仍然困惑如何用我的形式做到这一点。如何把错误放在图片中..

这是我的代码：My JFIDDLE 谢谢......

Answer 1

首先，您应该添加jquery Validation插件正常工作所需的资源。希望以下内容可以帮助您配对。：）

$.validator.addMethod("inline", function () {
     return $("#form1").find(".inline:checked").length > 0;
 }, 'Please select at least one .');

 $(document).ready(function () {
     $("input[name=request]").change(function () {
         var me = $(this);

         otherInputs.attr("disabled", !this.checked);
         otherInputs.attr("value", "");

     });

     $("#form1").validate({
         errorPlacement: function (error, element) {
             if ($(element).hasClass("one_required")) {
                 error.insertAfter($(element).closest("table"));
             } else {
                 error.insertAfter(element);
             }
         },
         rules: {
             'request[]': {
                 required: true
             },
                 'keluhan': {
                 required: true
             }
         },
         submitHandler: function (form) {
             $("#errorDiv").html("");
             form.submit();
         }

     });
 });

小提琴here

<强> FYI

Jquery验证文档here

使用jquery在表单上提交时出现错误消息

1 个答案: