Question

我有一个更新操作来根据我的文本框输入更新值。我使用javascript进行验证。脚本和验证仅适用于第一个文本框值我的观点代码

     @foreach (var item in Model)
      {     <tr>          
         <td align="right" class="Text_nocolor" valign="top">
      @using (Html.BeginForm("Update", "Cart", new { UserID = Request.QueryString["UserID"] }, FormMethod.Post, new { id = "myForm" }))
     {          
         @Html.Hidden("id", @Request.QueryString["UserID"] as string)
         @Html.Hidden("productid", item.ProductID as string)
         <input id="Quantity" type="text" class="Text_nocolor" name="Quantity" value="@item.Quantity"  onblur="return allownumbers() " maxlength="3"/>  
          @Html.Hidden("unitrate", item.Rate)               
          <input type="submit" value="Edit" class="Text_nocolor" onclick="return RegainFocus();" />
     }
       </td >
<tr>
    }

我使用的脚本：

 <script type="text/javascript">
    function RegainFocus() {
            if ((document.getElementById("Quantity").value).length == 0) {
                document.getElementById("Quantity").focus();
                alert("Quantity cannot be empty");
                document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
                return false;
            }
            else if ((document.getElementById("Quantity").value) > 100) {
                alert("There is no enough inventory for this product to fulfill your order");
                document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
                return false;
            }           
        }
            function allownumbers() {
                var val = parseInt(document.getElementById("Quantity").value);
                if (!val || val < 1) {
                    alert('Please enter a valid value');
                    document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
                    return false;                 
                }
                document.getElementById("Quantity").value = val;
                return true;
            }
    </script>

我还检查了我是否为文本框获得了不同的ID。但是所有文本框都具有相同的ID，并且验证不适用于除第一个文本框之外的其他文本框任何建议。

编辑::

  function allownumbers() {
            alert('fasfa');
            var elements = document.getElementsByName('Quantity');
            for (var i = 0; i < elements[i].length; i++) {  
                alert(elements);
                if (!elements || elements < 1) {
                    alert('Please enter a valid value');                    
                    return false;
                }
                else if (elements > 100) {
                    alert('Please enter a value less than 100');
                    return false;
                }
            }               
            return true;
        }

模型具有值，每个文本框都包含值。但是元素只返回NaN作为值。

Answer 1

您可以获取具有名称的元素并对其进行迭代;

var elements = document.getElementsByName('Quantity');
for(var i = 0; i < elements.length; i++){
    //validate elements[i].value
}

您可以为每个文本框指定唯一ID（第一种解决方案更好）
使用jQuery验证插件

编辑：修复您的代码

function allownumbers() {
        var elements = document.getElementsByName('Quantity');
        for (var i = 0; i < elements.length; i++) {  
            if (elements[i].value == '' || elements[i].value < 1) {
                alert('Please enter a valid value');                    
                return false;
            }
            else if (elements[i].value > 100) {
                alert('Please enter a value less than 100');
                return false;
            }
        }               
        return true;
    }

小提琴：http://jsfiddle.net/kDVDb/

Answer 2

您不能拥有多个具有相同ID的DOM元素。在循环中，您需要为每个文本输入生成唯一的Id，然后单独调用您的验证方法。

或者，您可以使用jQuery的.each()方法，该方法将迭代多个元素。类似的东西：

$('input[name=Quantity]').each(function(index) {
    validation logic here
});

在MVC4中验证文本框

2 个答案: