只需几步的一个大型表格 - 验证问题

Question

我有一个MVC订单，里面有4个步骤。

用户点击＆＃34; NEXT＆＃34;在第一步 - ＆gt;第二步打开等......

在我的视图模型上，我有一个由所有4种形式的所有字段组成的对象。

我怎样才能在提交时向服务器发送所有4个表格的数据？

我这样做（4种形式）用于验证目的，所以我可以在进入下一步之前验证每个表单。

我用jquery显示/隐藏表单。

我的订单视图（没有设计等的示例..）

<div>
<form id="formStep1">
    <label>First Name</label>
    <input type="text" name="sellerFirstName" class="required" />
    <label>Last Name</label>
    <input type="text" name="sellerLastName" class="required" />
    <button id="submitStep1">Next</button>
</form>
<form id="formStep2">
    <label>Address</label>
    <input type="text" class="required" name="propertyAddress" />
    <label>City</label>
    <input type="text" class="required" name="propertyCity" />
    <label>State</label>
    <input type="text" class="required" name="propertyState" />
    <button type="submit" class="orderf02" id="submitStep2">Next</button>
</form>
<form id="formStep3">
    <label>First Name</label>
    <input type="text" name="buyerFirstName" class="required" />
    <label>Last Name</label>
    <input type="text" name="buyerLastName" class="required" />
    <button type="submit" class="orderf02" id="submitStep3">Next</button>
</form>
<form id="formStep4" method="POST" action="Order/SubmitOrder">
    <input type="file" id="file1">
    <input type="text" id="file1text" />
    <button class="orderf02" type="submit" id="submitStep4">SUBMIT</button>
</form>

我的订单对象：

public class Order
{
//First Step
public string sellerFirstName { get; set; }
public string sellerMiddleName { get; set; }

//Second Step
public string propertyAddress { get; set; }
public string propertyCity { get; set; }
public string propertyState { get; set; }

//Third Step
public string buyerFirstName { get; set; }
public string buyerLastName { get; set; }

//Forth Step
public HttpPostedFileBase file1 { get; set; }
public string file1text { get; set; }
}

Answer 1

为此，您需要为不同的步骤创建一个表单添加输入到不同的容器（例如div），然后使用 JavaScript 或 jQuery 并最后发布。要解决验证问题，请添加验证特定容器的函数：

// Validate every input element inside div.
// Return false if any element fails validation.
function validateElementsInsideContainer(container, validator) {
    var isCurrentDivValid = true;

    if (container && validator) {
        $(container).find("input").each(function () {
            if (!validator.element($(this))) {
                isCurrentDivValid = false;
            }
        });
    }

    return isCurrentDivValid;
}

然后在每个步骤更改时为容器调用此函数，并仅在有效时导航：

var validator = $("form").validate();

function toSecondStep() {
    var firstStep = $("#first-step");
    var secondStep = $("#second-step");

    // Validate
    var isValid = validateElementsInsideContainer(firstStep, validator);

    if(isValid) {
        firstStep.hide();
        secondStep.show();
    }
}

更新

这里的主要方法是validator.element()。你可以传递你想要的任何输入，它将验证它。例如，如果您想根据某些过滤器进行验证，也可以执行此操作。添加类似于validateElementsInsideContainer的功能，如下所示：

function validateSpecificElements(elements, validator) {
    var elementsAreValid = true;

    if (elements && validator) {
        $(elements).each(function () {
            if (!validator.element($(this))) {
                elementsAreValid = false;
            }
        });
    }

    return elementsAreValid;
}

然后您可以根据需要选择输入并验证它们：

var validator = $("form").validate();

function toSecondStep() {
    var firstStep = $("#first-step");
    var secondStep = $("#second-step");

    // Get elements to validate
    var elementsToValidate = $("form").find(".sepcific-element-class");     
    var isValid = validateSpecificElements(elementsToValidate, validator);

    if(isValid) {
        firstStep.hide();
        secondStep.show();
    }
}