1

我正在尝试实现这里的演示 jquery validate 插件。但我要解决的是：如果您在页面加载后单击提交，插件会显示带有十字符号的验证消息。如果你输入一些东西，味精会变成复选标记图像。但是，如果您再次删除文本，它会显示验证消息，但带有复选标记而不是交叉图像。我想为我的网站更正此问题：

我正在使用 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"));

         }

    });

    });
4

1 回答 1

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

  }
    });



});
于 2012-12-12T20:57:46.760 回答