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

Question

基本上我有两个 div，我用它来为每个页面只显示一个 div。所以在加载时我首先加载 (id="divSection1")。单击 Next 按钮时，JQuery 应该只验证第一页上的字段。但在我的例子中，它验证了隐藏的第二个 div 元素。这是问题 1。 Jquery 只需要验证页面上可见的 div

第二期是： 我的设计有 3 个具有相同 class 名称但 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
}

关于此的任何 help/suggestion/inputs 都非常有帮助。

谢谢，

白

Answer 1

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

我使用 html <input> 作为密码和确认密码。但是当我使用 HTML 助手时，它开始工作了-

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

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

JQuery Validation for multi-step registration asp.net mvc pages

jquery

html

asp.net-mvc

jquery-validate

unobtrusive-validation