Question

我有一个多步骤表单，用php和sql数据库生成。

我的所有输入都有不同的名称，可以随查询而改变。并且我可以在一个步骤中具有多个具有相同类型的输入。当我点击下一步时，我想验证每个步骤的每个输入，选择和复选框。

这是第一步的html代码：

<fieldset>
 <h2 class="fs-title">Title</h2>
 <label>01) question 1</label><br>
 <input type="text" value="" required="required" name="REP_01"><br>
 <label>02) question 2</label><br>
 <input type="text" value="" required="required" name="REP_02"><br>
 <label>03) question 3</label><br>
 <input type="number" value="" name="REP_03" required="required"><br>
 <label>04)question 4</label><br>
 <input type="number" value="" name="REP_04" required="required"><br>
 <input type="button" value="Suivant" class="next action-button" name="next">
 </fieldset>

这是我的jquery脚本，试图验证它：

$(".next").click(function(){
  var erros = 0;
  if (fieldsetn == 1) {

     if ($('input[type="text"]').val().length === 0) {
        $('input[type="text"]').addClass('warning');
        $('input[type="text"]').attr("placeholder","Missing value"); 
       erros = 1;}
     else {
       $('input[type="text"]').removeClass('warning');}
  }

此脚本适用于我的步骤的第一个输入类型文本，但不适用于第二个。我想我必须为Jquery提供类似的东西。

你能帮帮我吗？谢谢

Answer 1

试试这段代码，

$(".next").click(function () {
    var erros = 0;
    $('input[type="text"]').each(function () {
        if ($(this).val().length === 0) {
            $(this).addClass('warning');
            $(this).attr("placeholder", "Missing value");
            erros = 1;
        } else {
            $(this).removeClass('warning');
            $(this).attr("placeholder", "");
        }
    });
});

http://jsfiddle.net/2dntu0co/

Answer 2

如果要选择第n个元素，则可以使用.eq(8)（基于0）。要循环每个元素，请使用$.each：

$('input[name="text"]').removeClass('warning');

$.each($('input[type="text"]'), function(){
   var currentElementInDom = $(this);
   if (currentElementInDom.val().length == 0) {
      /* rest of code */
   }
});

Answer 3

试试这个。

 var flag=false;
   $('input[type="text"]').each(function(){
         if($(this).val()==''){
            flag=true;
            break;
          }
   });

  if (flag) {
        $('input[type="text"]').addClass('warning');
        $('input[type="text"]').attr("placeholder","Missing value"); 
       erros = 1;
   }else {
       $('input[name="text"]').removeClass('warning');
  }

Answer 4

这是因为在元素的集上使用val()只会返回第一个元素的值。因此，如果您的第一个字段为空，则所有其他字段都将具有“警告”类。

您可以采用两种不同的方式：

正如你的建议，jQuery中有一个each method，所以你可以这样做：

$('input[type="text"]').each(function(){
   if ($(this).val().length === 0) {
      $(this).addClass('warning');
      $(this).attr("placeholder","Missing value"); 
      erros = 1;
   }else {
       $(this).removeClass('warning');
   }
});

或者您可以使用filter并执行以下操作：

$('input[type="text"]').filter(function(){
   return $(this).val === '';
}).addClass('warning').attr("placeholder","Missing value");

对具有相同名称的输入执行步骤形式验证器

4 个答案: