Question

我需要一个jquery代码来验证这个HTML（jsbin文件）：Jsbin

HTML：

<p id="options">
<strong>Options:</strong>
<span>
  <input type="checkbox" name="ids" value="101" id="opcao-0">
  <label for="opcao-0" style="width: 0px;">Option 1</label>
  <input type="text" placeholder="Date" class="data hasDatepicker" name="datas" id="opcao-0-data">
</span>
<span>
  <input type="checkbox" name="ids" value="102" id="opcao-1">
  <label for="opcao-1">Option 2</label>
  <input type="text" placeholder="Date" class="data hasDatepicker" name="datas" id="opcao-1-data">
</span>
<span>
  <input type="checkbox" name="ids" value="108" id="opcao-7">
  <label for="opcao-7">Option 8</label>
  <input type="text" placeholder="Date" class="data hasDatepicker" name="datas" id="opcao-7-data">
</span>
<span>
  <input type="checkbox" name="ids" value="109" id="opcao-8">
  <label for="opcao-8">Other Option.</label>
  <input type="text" placeholder="What?" class="outro" name="outro" id="opcao-8-outro">
  <input type="text" placeholder="Date" class="data hasDatepicker" name="datas" id="opcao-8-data">
</span>

JS：

$("input[type=checkbox]").change(function () {
    if($(this).is(':checked')) {
        $(this).siblings("input").attr("class", "required");
    }
    else {
        $(this).siblings("input").removeClass("required");
    }
});
$('input[type=submit]').click(function () {
    //here i need to check if it has at least one element with the class 'required. If so, avoid sending
});

当我勾选任何复选框时，必须输入下一个兄弟姐妹。

Answer 1

我明白了......我认为你需要的是JQuery Validation Plugin之类的东西：

$form = $("form").validate();
$( "input[type=checkbox]" ).change(function () {
  if($(this).is( ':checked' ))
    $(this).siblings( "input" ).attr( "class", "required" );
  else {
     $(this).siblings( "input" ).removeClass( "required" );
    $form.resetForm();
  }
});

在这段代码中，我使用全局变量来保持表单验证，并在取消选中某些输入时重置验证。

JSBin

Answer 2

您需要Jquery Validation Plugin

DEMO

<div class="content-area">
    <form action="" method="post" id="Form1" name="Form1">
      <input id="rd1" name="rd1" type="checkbox" />
      <label for="rd1">Central</label>
      <textarea id="txt1" name="txt1" maxlength="10"></textarea>
      <input type="submit" id="submit" value="SAVE " data-mini="true" />
    </form>
</div>


 $('#submit').click(function () {
   submitForm()
 });

function submitForm() {

$('#Form1').validate({
    onfocusout: false,
    onkeyup: false,
    ignore: "",
    rules: {
        rd1: {
            required: true
        },
        txt1: {
           required: {
                depends: function (element) {
                    return $('#rd1').is(':checked');
                }
            }
        }
    },
    showErrors: function (errorMap, errorList) {
        var messages = "";
        var check = 0;
        $.each(errorList, function (index, value) {
            check = 1;
            var id = $(value.element).attr('id');
            messages += (index + 1) + ". " + value.message + "\n";
        });

        messages = "Please correct following errors \n" + messages;
        if (check == 1) {
            alert(messages);
        }
    },
    submitHandler: function () {
                },
    messages: {
        rd1: {
            required: "Please select central"
        },
        txt1: {
            required: "Please enter in textbox"
        }
    }
  });
}

根据选中的输入验证另一个元素

2 个答案: