javascript: form length validation

Question

Я думаю, у меня есть проблема проверки на моем javascript. Он по-прежнему отправляется, пока форма недействительна. В частности, когда пользователь вводит более 10 символов в длину, он все равно отправляет форму в базу данных, в то время как он должен отображать предупреждение. Вот сценарий:

<script type="text/javascript"> 
function validateForm() 
{ 
var numericExpression = /^[0-9]+$/; 
var a=document.forms["purchaseform"]["no"].value; 
var b=document.forms["purchaseform"]["qty"].value; 
if (a==null || a=="") 
    { 
    alert("Form number must be filled out"); 
    return false; 
    } 
if(a.match(numericExpression)) 
    { 
    return true; 
    } 
    else 
    { 
    alert("Form number must be filled with numbers only"); 
    return false; 
    } 
if(a.length > 10) //i got a problem with this one i think 
    { 
    alert("Form number must not be greater than 10 character length"); 
    return false; 
    } 
if (b==null || b=="") 
    { 
    alert("Quantity must be filled out"); 
    return false; 
    } 
if(b.match(numericExpression)) 
    { 
    return true; 
    } 
    else 
    { 
    alert("Quantity must be filled with numbers only"); 
    return false; 
    } 
} 
</script> 

А вот форма сниппет:

<form name="purchaseform" method="post" onsubmit="return validateForm()" action="submitpurchaseadmin.php"> 
<table> 
    <tr> 
     <td>Form number</td> 
     <td><input type="text" name="no"></td> 
    </tr> 
    <tr> 
     <td>Category</td> 
     <td> 
     <select id="cat" name="cat"> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Item</td> 
     <td> 
     <select id="item" name="item"> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Quantity</td> 
     <td><input type="text" name="qty"></td> 
    </tr> 
    <tr> 
     <td>Date</td> 
     <td><input type="text" name="date" value="<?php echo date("d-m-Y"); ?>"></td> 
    </tr> 
    <tr> 
     <td colspan="2" align="center"><input type="submit" name="submit" value="Save"></td> 
    </tr> 
</table> 
</form> 

Answer 1

Добавить идентификатор к этим входам и сделать

function validateForm() { 
    var a = document.getElementById("no").value; 
    var b = document.getElementById("qty").value; 

    if (!a.length) { 
     alert("Form number must be filled out"); 
     return false; 
    }else if (!a.match(/^[0-9]+$/)) { 
     alert("Form number must be filled with numbers only"); 
     return false; 
    }else if (a.length > 10) { 
     alert("Form number must not be greater than 10 character length"); 
     return false; 
    }else if (!b.length) { 
     alert("Quantity must be filled out"); 
     return false; 
    }else if (!b.match(/^[0-9]+$/)) { 
     alert("Quantity must be filled with numbers only"); 
     return false; 
    } 
} 

FIDDLE

Answer 2

onsubmit не автоматически запретить отправку формы, вам необходимо использовать preventDefault внутри вашей функции onsubmit.

Смотрите здесь:

onsubmit method doesn't stop submit

отметить - в то время как исправление адреса Adeneo в пустое имя и Quanity не кажется, что это будет предупреждать о длине a.

Answer 3

Возможно, проблема здесь: if(a.match(numericExpression)), когда пользователь вводит более 10 символов в длину, оператор if также возвращает true.