Question

我想在我的网络表单中添加一些验证，用户输入是在动态表格中创建的**（用户可以添加和删除行）**，基本上用户将在完成后点击提交，我会调用一个java脚本函数来构建一个列表以传递给我的控制器，我的问题是如何在列表构建之前验证用户输入以确保其正确的数据类型等

HTML

    <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="tab-content" id="tab_logic" name="table1">
                        <thead>
                        <tr>
                            <th class="text-center" style="width: 25px">
                                #
                            </th>
                            <th class="text-center" style="width: 150px">
                                Status
                            </th>
                            <th class="text-center" style="width: 250px">
                                Actions
                            </th>
                            <th class="text-center" style="width: 150px">
                                Target
                            </th>
                            <th class="text-center" style="width: 100px">
                                Progress
                            </th>
                            <th class="text-center" style="width: 250px">
                                Comments
                            </th>
                        </tr>
                        </thead>
                        <tbody id="mainData">
                        <tr id='entry1'>
                            <td>
                                1
                            </td>
                            <td>
                                <div class="form-group">
                                    <select name="select" class="form-control" id="status1">
                                        <option disabled="disabled" selected="selected">Select:</option>
                                        <option style="color: green; background-color: white">Competent</option>
                                        <option style="color: orange; background-color: white">Improvement-Required</option>
                                        <option style="color: red; background-color: white">Below Average</option>
                                    </select>
                                </div>

                            </td>
                            <td>
                                <textarea class="form-control" id='action1'></textarea>    
                            </td>
                            <td>
                                <input type="date" class="form-control" id='target1'/>
                            </td>
                            <td>
                                <input type="text" class="form-control" id='progress1' required="required"/>

                            </td>
                            <td>
                                <textarea class="form-control" id='comments1'></textarea>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            &nbsp;
            &nbsp;
            <div>
                <a id="add_row" class="btn btn-primary btn-sm pull-left">Add Row</a>
                &nbsp; &nbsp; <a id='delete_row' class="btn btn-primary btn-sm">Delete Row </a>
                &nbsp; &nbsp; &nbsp; &nbsp; <input type="button" value="Submit" id="subButton" widthvalue="Submit" class="btn btn-primary btn-sm" style="vertical-align: bottom"/>
            </div>
        </div>

的Javascript

  $("#subButton")
            .click(function() {

                for (var j = 1; j <= x; j++) {

                    var statusEntered = document.getElementById("status" + j).value;

                    var actionsEntered = document.getElementById("action" + j).value;

                    var targetEntered = document.getElementById("target" + j).value;

                    var progessEntered = document.getElementById("progress" + j).value;

                    var commentsEntered = document.getElementById("comments" + j).value;

                    var area = "PersonalDevelopment";

                    var test = employeeSelected.value; 

                    var entry = new newEntry(statusEntered,
                        actionsEntered,
                        targetEntered,
                        progessEntered,
                        commentsEntered,
                        area, test
                    );

                    arrayDetails.push(entry);  
                }

                    sendToController();
            });

        function sendToController() {
            $.ajax({
                type: "POST",
                url: '@Url.Action("Save", "OneToOne", "EmpList")',
                contentType: "application/json; charset=utf-8",
                datatype: JSON,
                data: JSON.stringify({ methodParam: arrayDetails }),
                traditional: true
            });
        }
    });

MVC中的Webform验证

0 个答案: