使用java脚本验证PHP表单

Validate PHP form using java script

本文关键字：PHP 表单 验证 脚本 java 使用      更新时间：2023-09-26

我有一个从数据库动态填充的表单，如下所示

    <form name="marksForm" method="post" action="process_add_marks.php">
        <table width="800px" class="tbl">
            <tr><th><b>Name</b></th><th><b>University</b></th><th><b>Batch</b></th><th><b>Contact</b></th><th><b>Add Marks</b></th></tr>
            <?php
            $query = "SELECT sl_no,student_name,university,batch,contact FROM mytable WHERE `university` = '".$clgname."' AND `batch` = '".$batch."' AND delete_status != 'Deleted'";
            $raw_result = mysqli_query($link,$query)or die(mysqli_error());
            $count=mysqli_num_rows($raw_result);
            if(mysqli_num_rows($raw_result)>0)
            {
                while($results = mysqli_fetch_array($raw_result))
                {
                    echo "<tr>";
                    echo "<td>".$results['student_name']."</td>";
                    echo "<td>".$results['university']."</td>";
                    echo "<td>".$results['batch']."</td>";
                    echo "<td>".$results['contact']."</td>";
                    echo "<td><input name=marks[".$results['sl_no']."] style='width:30px' type='text'></td>";
                    echo "</tr>";
                }
            }
            ?>
        </table>
        <p id="markserr" style="color: #FF0000"></p>
        <input type="hidden" name="hisdl" value="<?=$sdlname?>">
        <input style="margin: 20px;cursor: pointer;" name="submit"  type="submit" class="button" onclick="return validateMarks();">
    </div>    
</form>

我试图验证输入字段使用javascript如下

function validateMarks()
{
    var b=document.getElementsByTagName('input');
    var count=0;
    for (i=0;i<b.length;i++){
        var box=b[i];
        if( box.value!=''){
            count++;
            break;
        }
    }
    if (count!=0){
        alert('Please fill all the fields');
        return false;
    } else {
        return true;
    }
}

问题是我不能提交表单，即使填完所有的输入字段

问题在这里，你的脚本试图验证你的提交输入的值。

正如其中一条评论所建议的那样，您可以在输入元素上使用required属性并相应地更改脚本。像这样…

<script>
 function validateMarks()
{
    var b = document.getElementsByTagName('input');
    var count = 0;
    for(var i in b) {
        var box = b[i];
        if( box.required && box.value === '' ){
            count++;
        }
    }
    if (count > 0){
        alert('Please fill all the fields');
        return false;
    } else {
        return true;
    }
}
</script>
<form>
    <input type="text" name="foo" required />
    <input type="text" name="bar" required />
    <input type="text" name="wang" required />
    <input type="submit" onclick="return validateMarks();" />
</form>

我已经稍微修改了你的脚本，也使它更容易读

相关文章：