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。希望它有所帮助..

logger := loggers.New()
logger.Error("Error occured",err)
logger.Info("Doing","something","again","blah")

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)
  });


});

fieldset中的jQuery验证

2 个答案: