检查每个表单字段的Jquery函数

时间:2015-04-04 01:48:47

标签: javascript jquery forms

我已经为此工作了3天,仍然无法让它发挥作用。

我想要一个检查每个表单字段的函数,如果没有填充则会发出警报。 但也是每个领域的独特警报信息。例如:“字段1未填充”,“字段2未填充”等等...

我尝试了2个功能。这一个:

function tashlum() {
    if (emptyElements.length === 0) {
        alert("הכל מלא")
    } else {
        alert("לא מלא")
    }
}

和这一个:

function tashlum() {  
    var x = document.forms["fr1"]["company"].value;
    if (x == null || x == "") {
        alert("אנא מלא את שם החברה בטופס")
        var y = document.forms["fr1"]["mem"].value;
        if (y == null || y == "") {
            alert("אנא בחר בסוג הזכרון בטופס")
            return false;
        }
        var y = document.forms["fr1"]["mem"].value;
        if (y == null || y == "") {
            alert("אנא בחר בסוג הזכרון בטופס")
            return false;
        }
        var x = document.forms["fr1"]["select0"].value;
        if (x == null || x == "") {
            alert("אנא בחר באופצית הזכרון בטופס")
            return false;
        }
        var x = document.forms["fr1"]["screen"].value;
        if (x == null || x == "") {
            alert("אנא בחר את גודל המסך בטופס")
            return false;
        }
        var x = document.forms["fr1"]["camera"].value;
        if (x == null || x == "") {
            alert("אנא בחר את סוג המצלמה בטופס")
            return false;
        }
        var x = document.forms["fr1"]["bat"].value;
        if (x == null || x == "") {
            alert("אנא בחר את סוג הבטריה בטופס")
            return false;
        }
        var x = document.forms["fr1"]["ez"].value;
        if (x == null || x == "") {
            alert("אנא בחר את אזור הרכישה בטופס")
            return false;
        }
        else {
            window.open("tashlum.html");
        }
    }
}

HTML:

<form name="fr1" action="http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl " method="post" enctype="multipart/form-data" onsubmit="return tashlum()">

2 个答案:

答案 0 :(得分:1)

所以,如果您有这样的表格:

<form method="POST" action="submit.php" id="form1" onsubmit="return validateForm();">
    <input type="text" name="field1" value="" />
    <input type="text" name="field2" value="" />
    ...
    <input type="text" name="field99" value="" />
    <button type="submit">Submit</button>
</form>

然后你可以像这样循环输入元素:

var textFields = document.querySelectorAll("#form1 input[type=text]");

for(var i=0; i<textFields.length; i++){
  //Test the value here...
}

这是一个有效的例子:

&#13;
&#13;
function validateForm(){
    var textFields = document.querySelectorAll("#form1 input[type=text]");
    
    for(var i=0; i<textFields.length; i++){
        if(textFields[i].value == ''){
            alert(textFields[i].name + ' is not filled');
            return false;
        }
    }
}
&#13;
<form method="POST" action="submit.php" id="form1" onsubmit="return validateForm();">
    <label>First Name: <input type="text" name="First Name" value="" /></label><br />
    <label>Last Name: <input type="text" name="Last Name" value="" /></label><br />
    <label>Phone Number: <input type="text" name="Phone Number" value="" /></label><br />
    <button type="submit">Submit</button>
</form>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

根据这里的答案以及另一个主题jQuery radio button unchecked error,这是灵魂。
正常输入的第一个代码(文本)+包括其他输入(2个无线电场)

        function tashlum() { 
        var textFields = document.querySelectorAll("#form1 input");

        for (var i = 0; i < textFields.length; i++) {
            if (textFields[i].value == '') {
                alert( 'אנא מלא את ה' + textFields[i].id);
                return false;
            }
        }
        if ($('[name="camera"]:checked').length == 0) {
            alert('אנא בחר את סוג המצלמה');
            return false;
        }
        if ($('[name="memory"]:checked').length == 0) {
            alert('אנא בחר את סוג הזכרון');
            return false;
        }
    } 

感谢队友帮助我。在下一个问题中见到你。