Question

我有一个HTML表单，可以使用jQuery验证插件进行验证。它运行正常，但我的项目的全部范围是动态克隆并将表单附加到上一个表单。动态克隆的表单根本不会验证。如何验证动态创建的表单？我的“#addOne”按钮生成动态克隆的表单。

这是我的jsfiddle：https://jsfiddle.net/37jhbb5g/5/

HTML

<div class="article_properties">
  <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
    <p style="display: inline">Page Number</p>
    <div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px">

      <p style="display: inline" class="pageNumber"></p>
    </div>
    <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
    <p>Image</p>
    <input style="padding: 0px" type="file" name="image">
    <p>Subtitle</p>
    <input type="text" name="subtitle">

    <p>Text</p>
    <textarea name="text" rows="4"></textarea>
    <input id="properties_btn" type="submit" value="Submit/Update">
    <hr style="border: 1px dotted lightgray; margin-bottom: 50px">
  </form>

</div>
<!--End of article properties div-->
<div id="addOne">
  <p>+Add page</p>
</div>

的jQuery

$(".article_properties_form").validate({
  errorElement: 'div',
  rules: {
    image: {
      required: true,
      extension: "jpg,jpeg"
    },

    subtitle: {
      required: true,
      minlength: 2,
      maxlength: 25
    },
    text: {
      required: true,
      minlength: 35,
      maxlength: 275
    }
  },

  messages: {
    image: {
      required: "This page needs an image",
      extension: "You're only allowed to upload jpg or png images."
    },

    subtitle: {
      required: "You have to provide a subtitle for this page!",
      minlength: "Your subtitle must be at least 2 characters long",
      maxlength: "Your subtitle must be less than 25 characters long"
    },
    text: {
      required: "Please enter text for this page",
      minlength: "Your text must be at least 35 characters long",
      maxlength: "Your text must be less than 275 characters long"
    },
  },

});


var numPages = 10;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);

$('#addOne').click(function() {

  numPages--;

  if (numPages == 1) {
    var articlePropsTemplate = $('.article_properties_form:last').clone();
    $('.article_properties').append(articlePropsTemplate);
    $('.pageNumber:last').text(numPages);
    $('.inputNumber:last').text(numPages);
    articlePropsTemplate[0].reset();
    $('.nextBtn').fadeIn("slow");
    $('#addOne').hide();
  } else {
    var articlePropsTemplate = $('.article_properties_form:last').clone();
    $('.article_properties').append(articlePropsTemplate);
    articlePropsTemplate[0].reset();
    $('.pageNumber:last').text(numPages);
    $('.inputNumber:last').text(numPages);
  }

});

$('body').on('submit', '.article_properties_form', function(e) {
  e.preventDefault();

  if ($('.article_properties_form').valid()) {
    $.ajax({
      type: 'POST',
      url: '',
      data: $(this).serialize(),
      success: function(data) {

      }
    });
  } else {

  }
});

Answer 1

在第一种形式中使用HTML5表单元素。然后我认为你不需要任何jquery验证。它也适用于后续添加页面。试试这个 -

my $conversion_2 = to_vstring_2($var);
# Prints "Version: 1.2.3, type: SCALAR"
printf("Version: %vd, type: %s\n", $conversion_2, ref \$conversion_2);

my $conversion_3 = to_vstring_3($var);
# Prints "Version: 1.2.3, type: SCALAR"
printf("Version: %vd, type: %s\n", $conversion_3, ref \$conversion_3);

sub to_vstring_2 {
    my ($arg) = @_;

    $arg =~ tr/0-9.//cd;
    $arg = pack('U*', split(/\./, $arg));

    return $arg;
}

sub to_vstring_3 {
    my ($arg) = @_;

    $arg =~ tr/0-9.//cd;
    $arg =~ s/[._]?(\d+)/chr($1 & 0x0FFFF)/eg;

    return $arg;
}

验证动态克隆的表单

1 个答案: