Validation of Textbox in MVC4

Question

I have a an Update Action to update the value based on my textbox input. I used javascript for my validation. The script and validation works fine only for the first textbox value.
My View Code

     @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>
    }

The Script I used :

 <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>

I also checked whether I get a different ID for the Textbox. But all the textboxes have same ID and the validation doesnt works for the other textbox except the first textbox.
Any Suggestions.

EDIT ::

  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;
        }

The model has values and Each textbox contain values in it. but elements return only NaN as value.

Answer 1

1. You can get elements with name and iterate over them;

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

2. You can give each textbox unique id (First solution is better)

3. Use jQuery validation plugin

EDIT: Fix your code

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;
    }​

Fiddle: http://jsfiddle.net/kDVDb/

Answer 2

You can't have multiple DOM elements with the same ID. In your loop, you need to generate unique Id's for each text input, then call your validation method independently.

Or, you can use jQuery's .each() method, which will iterate over multiple elements. Something like:

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