Question

基本上我有两个div，我用来为每个页面只显示一个div。所以在加载时我首先加载（id =＆＃34; divSection1＆＃34;）。点击Next按钮，JQuery应该只验证第一页上的字段。但在我的情况下，它验证了隐藏的第二个div元素。这是问题1 。 Jquery只需要验证页面上的可查看div

第二期是： 我的设计有3个文本框，它们具有相同的类名但不同的ID和不同的名称。我必须确保用户输入divSection2中至少一个文本框。我试图使用$ .validate.addmethod（）。看起来我错过了一些东西：

<form action="~/Home/About" method="post" data-ajax="false" id="formId"   
onkeyup="formkeyup();">
<fieldset>
  <legend>Registration Form</legend>
<div class="section" id="divSection1" >
    <h3>Step 1: Password</h3>
    <ol>
        <li>
            @Html.LabelFor(m => m.UserName)
            @Html.TextBoxFor(m => m.UserName)
        </li>
        <li>
            @Html.LabelFor(m => m.Password)
            <input type="password" name="pwd" id="pwd" autocomplete="off" value="@Model.Password" onkeyup=" return ValidateField() "/>
        </li>
        <li>
            @Html.LabelFor(m => m.ConfirmPassword)
            <input type="password" name="confirmpwd" id="confirmpwd" autocomplete="off" value="@Model.ConfirmPwd" onkeyup=" return ValidateField() "/>
        </li>
    </ol>
</div>
<div id="divSection2" class="section">
    <input type="text" name="input1" class="answertextbox" />
    <input type="text" name="input2" class="answertextbox" />
    <input type="text" name="input3" class="answertextbox" />
</div>
 <div>
 <div id="errorMessage" style="display: inline-block; padding-bottom: 8px;">
                            @Html.ValidationSummary()
                        </div>
                    </div>
<p>
 <input type="button" id="NextId" name="NextId" value="Next" 
 onClick="Validate()/>
</p>
 </fieldset>
 </form>

这是JS代码：

function Validate()
{

  $('#formId').validate({
        rules: {
            ignore: ":hidden",
            pwd: {
                required: true
            },
            confirmPwd: {
                required: true
            }
        },
        messages: {
            Username: "Please enter Username",
            pwd: "Please enter Password",
            confirmPwd: "Please enter ConfirmPassword"
        }
    });


    var numCount = 0;
    $.validator.addMethod('answertextbox', function (val, el) {

        var $module = $(el).parents('div.panel');
        var length = $module.find('.answertextbox k-input:filled').length;
       //checking if any one of the text is entered
        if (length > 0) {
            numCount ++;
        }
    }, setMessage(numCount));

    jQuery.validator.addClassRules('answertextbox k-input', {
        'answertextbox': true
    });

}

 function setMessage(count) {
    if (count === 0) {
        $("#errorMessage").html('<span style="color:red">Please fill out at least one of these fields.</span>');
    }
}

修改

基本上我是使用数据注释尝试的，但它并不适合我。我在相应的属性上有验证消息 - 密码，确认密码...等！validator.element（this） - 即使输入文本框中没有值，也始终返回true。这是代码：

function Validate()
 {
  var validator = $("form").validate(); 
  var anyError = false;
        $('.section:visible').find("input").each(function() {
            if (!validator.element(this)) { // validate every input element inside this step
                anyError = true;
            }

        });

    if (anyError)
        return false; // exit if any error found
}

对此有任何帮助/建议/意见非常有帮助。

谢谢，

WH

Answer 1

我想出了这个问题。它现在正在工作 -

我使用html <input>作为密码并确认密码。但是，当我使用HTML帮助程序时，它开始工作 -

@Html.PasswordFor(m => m.Password,
                    new
                    {
                        id = "password",
                        autocomplete = "off",
                        onkeyup = " return ValidateField() "
                    })

用于多步注册asp.net mvc页面的JQuery验证

1 个答案: