字段集中的 jQuery 验证

Question

我有需要验证的多页。单击继续时如何使其仅对第一页有效？如果可能的话我不想直接这样使用，

$('.spanEmail').addClass('showError').removeClass('hideError')

我想制作动态代码以用于其他模板。我也不能使用 jquery validate 插件，因为在代码中有选择列表使用 ul li 方法需要遵循要求的标准样式。

以及当用户开始在输入字段中输入时如何使用 keyup 功能，我想再次为特定字段添加 hideError 类。提前致谢。

这是我的代码，这里是 jsfiddle https://jsfiddle.net/jCos/Lomd9rkr/

html

    <form id="my-form">
  <fieldset id="A">
    <div class="mwf-input">
      <label class="mwf-label" for="email-add">
        email</label>
      <input id="email-add" name="email-add" class="mwf-text line ptm required " type="email">
      <span id="spanEmail" class="required hideError">Please Enter Email Address</span>
    </div>
    <input type="button" value="Continue" id="next-button" class="next" name="next">
  </fieldset>
  <fieldset id="B">
    <label class="mwf-label" for="fname">
      First name</label>

    <div class="mwf-input">
      <input id="fname" name="fname" class="mwf-text line ptm " type="text">
    </div>
    <label class="mwf-label" for="lname">
      Last name</label>
    <span class="mwf-required">*</span>
    <div class="mwf-input">
      <input id="lname" name="lname" class="mwf-text line ptm required" type="text">
      <span id="spanLname" class="required hideError">Please enter Last Name</span>
    </div>
    <input type="button" value="Submit" id="submit" name="submit">
  </fieldset>
</form>

jQuery

$(document).ready(function() {
  $("#next-button").click(function() {
      var fields = $('input.required');
      for (var i = 0; i < fields.length; i++) {
        if ($(fields[i]).val() != '') {
          $('#my-form').each(function() {
            $(this).find('span.required').addClass('hideError').removeClass('showError');
          });
          $('#B').show();
          $('#A').hide();
        } else {
          $('#my-form').each(function() {
            $(this).find('span.required').addClass('showError').removeClass('hideError');
          });
        }
      }
      });
  });

css

   #B,
.hideError {
  display: none;
}

.showError {
  display: block;
  color: #DC3C14;
}

更新

我只是更新我的 jQuery 以在每个需要类的字段集中搜索输入

    $(document).ready(function() {
$("#next-button").click(function() {
    var fields = $('#A input.required');
    for (var i = 0; i < fields.length; i++) {
      if ($(fields[i]).val() != '') {

        $('#' + fields[i].id).siblings('span').addClass('hideError').removeClass('showError');
        $('#B').show();
        $('#A').hide();
      } else {
        $('#' + fields[i].id).siblings('span').addClass('showError').removeClass('hideError');

      }
      }

});

//function click for submit button
$("#submit").click(function() {
    var fields = $('#B input.required');
    for (var i = 0; i < fields.length; i++) {
      if ($(fields[i]).val() != '') {
//add and remove class siblings with input field only for <span>
        $('#' + fields[i].id).siblings('span').addClass('hideError').removeClass('showError');

      } else {
        $('#' + fields[i].id).siblings('span').addClass('showError').removeClass('hideError');

      }
      }

});

//function keyup clear error
$("input").keyup(function() {
var fields = $('input.required');
for (var i = 0; i < fields.length; i++) {
if ($(fields[i]).val() != '') {
    $('#' + fields[i].id).siblings('span').addClass('hideError').removeClass('showError');


} else {
  $('#' + fields[i].id).siblings('span').addClass('showError').removeClass('hideError');
}
}
});
});

如您所见，它仍然不是动态方式，因为我直接在var字段中给出了fieldset ID，如何在这个var字段中传递fieldset id？

还有如何在用户点击时获取按钮 ID？在我上面的 jQuery 中，我只是为不同的按钮编写相同的逻辑。

这里更新jsfiddle代码https://jsfiddle.net/jCos/Lomd9rkr/5/

Answer 1

我使用了 html5 表单验证和 jquery。希望对你有帮助。。

        <form id="my-form">
      <fieldset id="A">
        <div class="mwf-input">
          <label class="mwf-label" for="email-add">
            email</label>
            <input id="email-add" name="email-add" class="mwf-text line ptm required " required="required" type="email">
          <span id="spanEmail" class="required hideError">Please Enter Email Address</span>
        </div>
        <input type="button" value="Continue" id="next-button" class="next" name="next">
      </fieldset>
      <fieldset id="B">
        <label class="mwf-label" for="fname">
          First name</label>

        <div class="mwf-input">
          <input id="fname" name="fname" class="mwf-text line ptm " type="text">
        </div>
        <label class="mwf-label" for="lname">
          Last name</label>
        <span class="mwf-required">*</span>
        <div class="mwf-input">
          <input id="lname" name="lname" class="mwf-text line ptm required" required="required" type="text">
          <span id="spanLname" class="required hideError">Please enter Last Name</span>
        </div>
        <input type="submit" value="Submit" id="submit" name="submit">
      </fieldset>
    </form>



        <script>

            $(document).ready(function() {
                $("#next-button").click(function() {

                    var isValid = $('#email-add')[0].checkValidity();
                    console.log(isValid);
                    if(!isValid) {
                        $("#spanEmail").addClass('showError').removeClass('hideError');
                    }
                    else {
                        $("#spanEmail").addClass('hideError').removeClass('showError'); 
                        $('#B').show();
                        $('#A').hide();
                    }

                    });
            });

        </script>

Answer 2

最后，这是解决方案：

这里是演示jsFiddle

     $(document).ready(function() {

  var buttons = $('input[type="button"]');
  buttons.click(function() {
    var thisFieldset = $(this).closest("fieldset");
    $("input", thisFieldset).trigger("keyup")
    if ($(".showError", thisFieldset).length === 0) {
      var nextFieldset = thisFieldset.next().show()
      thisFieldset.hide()
      if (nextFieldset.length === 0) alert("now submit via ajax!")
    }
  })


  $('input.required').keyup(function() {
    var empty = $(this).val() == "";
    $(this).next().toggleClass("hideError", !empty).toggleClass("showError", empty)
  });
  var valid_email = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  $('input[type="email"]').keyup(function() {
    var val = $(this).val()
    var bad = !val.match(valid_email);
    $(this).next().toggleClass("hideError", !bad).toggleClass("showError", bad)
  });


});