Question

我正在尝试实现演示jquery validate plugin here。但我想要解决的是：如果您在页面加载后单击提交，则插件会显示带有交叉符号的验证消息。如果您键入内容，则msg将更改为复选标记图像。但是，如果再次删除文本，它会显示验证消息，但带有复选标记而不是交叉图像。我想为我的网站纠正这个问题：

我正在使用jquery.validate进行客户端验证。为了显示带有验证消息的右侧和交叉图标，我使用icomoons图标集（css方法）。我在下面添加了我的html和JS脚本。我试图使用错误位置来更改默认容器，但如果您在文本框中输入内容然后再次删除它，则从十字架到右侧的图标不会更改。将显示该消息，但图标不会更改。

另外，我想学习更有效的方法来编写jquery.validate来实现我在这里做的图标方法。

HTML部分：

 <!-- First step - form section starts here -->
         <form class="form-horizontal" id="sampleForm">
            <div class="control-group">
              <label class="control-label" for="firstName">First Name:</label>
              <div class="controls">
                <input type="text" id="firstName" name="firstName" placeholder="Peter">
                <div class="errormsgwrapper">
                 <span data-icon="&#xe000;" class="right hidden" aria-hidden="true"></span>
                 <span data-icon="&#xe003;" class="wrong hidden" aria-hidden="true"></span>
                 <div class="errormessage"></div>
                 </div> 
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="lastName">Last Name:</label>
              <div class="controls">
                <input type="text" id="lastName" name="lastName" placeholder="Parker">
                <div class="errormsgwrapper">
                 <span data-icon="&#xe000;" class="right hidden" aria-hidden="true"></span>
                 <span data-icon="&#xe003;" class="wrong hidden" aria-hidden="true"></span>
                 <div class="errormessage"></div>
                 </div> 
              </div>
            </div>
            <div class="control-group">
              <div class="controls pull-right">
                <button type="submit" class="btn">Next &raquo;</button>
              </div>
            </div>
        </form>
        <hr>
        <!-- /form -->

验证脚本：

$().ready(function() {

// validate signup form on keyup and submit

    $("#sampleForm").validate({

        rules: {
            firstName: "required",
            lastName: "required"
        },
        highlight: function(label) {
    $(label)
        .closest('.control-group').removeClass('success').addClass('error');
    $('label.error').removeClass('checked');
  },
  success: function(label) {
    label.parents(".errormsgwrapper").children('.wrong').addClass('hidden');
    label.parents(".errormsgwrapper").children('.right').removeClass('hidden');
    label.closest('.control-group').addClass('success');

  },
        messages: {
            firstName: {
                    required: "asdfds"
                },
            lastName: "Please enter your lastname"
        },
         errorPlacement: function(error, element) {
            var errormsgwrapper = element.next(".errormsgwrapper");

                errormsgwrapper.children("span.right").addClass('hidden');
                errormsgwrapper.children("span.wrong").removeClass('hidden');
                error.appendTo(errormsgwrapper.children(".errormessage"));

         }

    });

    });

Answer 1

解决方案就在这里 我找到了解决方案，还包括下面的示例代码。我们可以使用highlight / unhighlight来实现这一点。我正在尝试错误放置，当元素上的类从有效变为错误时，它不会触发！可以使用类甚至html元素来显示/隐藏使用高亮和不高亮，如下面的js代码所示......

<div id="signupwrap">
        <form id="signupform" autocomplete="off" method="get" action="">
        <div class="question">
            <label for="firstname">First Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="firstname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
        <br /><br />
        <div class="question">
            <label for="lastname">Last Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="lastname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
         <br /><br />

            <input id="signupsubmit" name="signup" type="submit" value="Signup" />


          </table>
      </form>
  </div>

我已经包含了span标记，以便为图标或图像提供适当的样式，无论您想要使用验证消息显示什么。 JS代码如下：

$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({

    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname"
    },

    errorPlacement: function(error, element) {
            error.appendTo(element.next('.errormessagewrapper').children());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
        alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {

    },
    highlight: function(element, errorClass, validClass) {


   $(element).next('.errormessagewrapper').children('span').addClass("icon-cancel").removeClass("icon-checkmark");

  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).next('.errormessagewrapper').children('span').removeClass("icon-cancel").addClass("icon-checkmark");

  }
    });



});

使用jquery.validate进行表单验证，以通过覆盖错误位置来显示正确和错误的图标

1 个答案: