PHP-如何验证PHP中的复选框和文本框?

时间:2017-06-09 06:16:22

标签: javascript php twitter-bootstrap

Screenshot我试图验证复选框和多个文本框。首先应禁用文本框,并且仅在勾选复选框时才应启用文本框。如果勾选复选框的同一行上的文本框保留为空,则还会弹出警报。

             <table class="table table-bordered"> 
    <tr align="center" style="background-color:black; color:white;">
               <tr> <td colspan="8" style="background-color:silver;"><input type="submit" class="btn btn-primary" id="addSPtoCart" name="addSPtoCart" value="Add To Cart" class="button-L" /></td></tr>
                <tr align="center" style="background-color:black; color:white;">    
               <td class="border"><span class="table-head"><label>Favorite</label></span></td>  
              <td><span class="table-head"><label>Material Code</label></span></td>
              <td><span class="table-head"><label>Material Desc</label></span></td>
              <td><span class="table-head"><label>Chart</label></span></td>
              <td><span class="table-head"><label>Shade</label></span></td>
              <td><span class="table-head"><label><?php echo $month1 ?></label></span></td>
              <td><span class="table-head"><label><?php echo $month2 ?></label></span></td>
              <td><span class="table-head"><label><?php echo $month3 ?></label></span></td>
              <!--<td class="no-border" align="center"><span class="table-head">Action</span></td>-->
             </tr>

    <tr class="abc" align="center">
                  <style>.abc:nth-child(even){background-color: silver;}</style>  
                <td><input type="checkbox" name="fav[]" id="fav[]" value="<?php echo $d['materialID']; ?>" /></td>
              <td><label><?php echo $d['materialCode']; ?></label></td>
              <td><label><?php echo $d['materialDesc']; ?></label></td>
              <td><label><?php echo $d['chart']; ?></label></td>
              <td><label><?php echo $d['shade']; ?></label></td>
              <td><input type="text"   class="form-control" style="width:80px; " size ="5" name="qty_1<?php echo $d['materialID'] ?>" id="qty_1<?php echo $d['materialID'] ?>" value =<?php echo $var1 ?> ></td>
              <td><input type="text"   class="form-control" style="width:80px;" size ="5" name="qty_2<?php echo $d['materialID'] ?>" id="qty_2<?php echo $d['materialID'] ?>" value =<?php echo $var2 ?> ></td>
              <td><input type="text"  class="form-control" style="width:80px;" size ="5" name="qty_3<?php echo $d['materialID'] ?>" id="qty_3<?php echo $d['materialID'] ?>" value =<?php echo $var3 ?> ></td>

            <!--  <td class="no-border" align="center"><a href="<?php //echo SITEURL; ?>/salesplan/salesplan-details/?id=<?php //echo $d['mmID']; ?>&mCatID=<?php// echo $_REQUEST["mCatID"];?>  ">View</a></td> -->

            </tr>

               <tr><td colspan="8"><input type="submit" class="btn btn-primary" id="addSPtoCart" name="addSPtoCart" value="Add To Cart" class="button-L" /></td></tr>

</table>

 <script type="text/javascript">
function validateForm() {
    var x = document.forms["frmFav"]["qty_1"].value;
        var y = document.forms["frmFav"]["qty_2"].value;
            var z = document.forms["frmFav"]["qty_3"].value;
            //var a = document.forms["frmFav"]["fav"].value;



    if ((x == "") || (!this.frmFav.fav.checked)) {
        alert("This field cannot be left empty !");
        return false;
    }
}
</script>

1 个答案:

答案 0 :(得分:0)

您应该对该按钮进行onclick操作以调用validateForm()函数

<input type="submit" class="btn btn-primary" id="addSPtoCart" name="addSPtoCart" value="Add To Cart" class="button-L" onclick="return validateForm()"/>

要启用和禁用文本框,请先将禁用的属性设置为

<td><input type="text"   class="form-control" style="width:80px; " size ="5" name="qty_1<?php echo $d['materialID'] ?>" id="qty_1<?php echo $d['materialID'] ?>" value =<?php echo $var1 ?> disabled></td>

用于触发启用和禁用框

的功能
 function checkboxchange(x){
 var formcontrol = x.parentNode.parentNode.getElementsByClassName("form-control");
 for (var i = 0; i < formcontrol.length; i++){
     if(formcontrol[i].disabled)
        formcontrol[i].disabled = false;
    else
        formcontrol[i].disabled = true;
 }
}

在复选框中添加函数调用

<td><input type="checkbox" name="fav[]" id="fav[]" value="<?php echo $d['materialID']; ?>" onchange="checkboxchange(this)"/></td>

希望有帮助

更新到validateForm()函数

function validateForm() {
var validate = document.querySelectorAll(".form-control:not(:disabled)");
for (var i = 0; i < validate.length; i++){
    if (validate[i].value=="") {
        alert("This field cannot be left empty !");
        return false;
    }
}
}