Question

我们正在尝试为表单中的选择选项添加验证，它适用于第一个下拉字段，但验证不适用于第二个下拉列表＆amp; 第三个多选复选框字段。

表示当我们点击提交按钮时，表单正在提交并且值保存在数据库中而不关心第二和第三个字段。

PHP

<form method="post" enctype='multipart/form-data' action="update.php" id="" onsubmit="return validate(); ">

        Designer : 
          <select onchange="getOrderDetail(event);" name="designer_id" id="designer_id" required>
            <option value="">Select Designer</option>
                  <?php 
                       while($data = $stmt->fetch())  
                        { 
                           if($data['type']=="admin")continue;
                  ?>
            <option value="<?php echo $data['userID'];?>">
                  <?php 
                     echo $data['name'];
                  ?>
            </option>
                  <?php } ?>
          </select>

      Order : 


        <div id="ordernumbers">
          <select name="designerorder_id" id="designerorder_id" required>
            <option>Select Order</option>
          </select>
          </div>      

      Product

        <div id="productnumbers" name="dproduct_id" id="dproduct_id" required>
          <select id="mySelect" >
            <option>Select Products</option>
          </select>

        </div>

脚本

function validate()
{

 var error="";

 var designer_id = document.getElementById( "designer_id" );
 if( designer_id.value == "" )
 {
  error = " Please Select Designer";
  document.getElementById( "error_para1" ).innerHTML = error;
  return false;
 }

 var error="";
 var designerorder_id = document.getElementById( "designerorder_id" );
 if( designerorder_id.value == "" )
 {
  error = " Please Select Order";
  document.getElementById( "error_para2" ).innerHTML = error;
  return false;
 }


 var error="";
 var dproduct_id = document.getElementById( "dproduct_id" );

 if( dproduct_id.value == "" )
 {
  error = " Please Select Product";
  document.getElementById( "error_para3" ).innerHTML = error;
  return false;
 }

}

function getOrderDetail(e)
  {
    var designerId=e.target.options[e.target.selectedIndex].value;    
    var url="http://sbdev2.kidsdial.com:81/php/site6/designerpaidstatus.php?designer_id="+designerId+"&opration=2";
       var request = jQuery.ajax( {
                url: url ,
                type: 'POST',                      
            } );

            request.done( function (result)
            {  
              document.getElementById('ordernumbers').innerHTML =result;

            } );
            request.fail( function ( error )
            {
                console.dir(error);             
            } );
     }
  function getProductDetail(e)
  {    
    var productId = $("#dproductselect option:selected").attr("class");  
    var finalstrig=productId.split(",");

    var select='';
    select+='<select class="test" multiple="multiple" name="dproduct_ids" id="dproduct_ids">';

    for(i=0;i<finalstrig.length;i++)
    {
      if(finalstrig[i]!=0)
      {
        select +='<option value="'+finalstrig[i]+'">'+finalstrig[i]+'</option>';
      }
    }
    select +='</select>';   
    document.getElementById('productnumbers').innerHTML =select;
    (function($) {
    $(function() {
        $('.test').fSelect();
    });
})(jQuery);

  }

$(function(){
  $("#button_reset").click(function() { 
    $("#productnumbers").html('<select id="mySelect"><option>Select Products</option></select>');
  });
});

修改 - Designerpaidstatus.php

$htmltext='';   
    $htmltext="<select id='dproductselect' name='designerorder_id' onchange='getProductDetail(this.value)'><option value=''>Select Order</option>";
    foreach ($order as $orderData)  
    {
        $orderitems=$orderData['dproduct_id'];

            $finalValue=$orderData->getIncrementId()."-".$orderitemsarray[$k];
            $htmltext=$htmltext.'<option class="'.$orderitems.'" name="'.$orderitems.'" value="'.$orderData->getIncrementId().'">'. $orderData->getIncrementId().'</option>';
    }
    $htmltext=$htmltext."</select>";
    echo $htmltext;exit;

Answer 1

function validate()
{

 var error="";
alert("Test");
 var designer_id = document.getElementById( "designer_id" );
 if( designer_id.value == "" )
 {
   
  error = " Please Select Designer";
  document.getElementById( "error_para1" ).innerHTML = error;
  return false;
 }

 var error="";
 var designerorder_id = document.getElementById( "designerorder_id" );
 if( designerorder_id.value == "" )
 {
  error = " Please Select Order";
  document.getElementById( "error_para2" ).innerHTML = error;
  return false;
 }


 var error="";
 var dproduct_id = document.getElementById( "dproduct_id" );

 if( dproduct_id.value == "" )
 {
  error = " Please Select Product";
  document.getElementById( "error_para3" ).innerHTML = error;
  return false;
 }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype='multipart/form-data' action="update.php" id="" onsubmit="return validate(); ">

        Designer : 
          <select onchange="getOrderDetail(event);" name="designer_id" id="designer_id" required>
            <option value="">Select Designer</option>
                 
          </select>

      Order : 


        <div id="ordernumbers">
          <select name="designerorder_id" id="designerorder_id" required>
            <option>Select Order</option>
          </select>
          </div>      

      Product

        <div id="productnumbers" name="dproduct_id" id="dproduct_id" required>
          <select id="mySelect" >
            <option>Select Products</option>
          </select>

        </div>
  
  <div id="error_para1">Test</div>
  <div id="error_para2"></div>
  <div id="error_para3"></div>

<button type="submit" onclick="validate" >Submit</button>
</form>

对于第一个选择，您已明确将选项值设置为空字符串

function validate()
{

 var error="";

 var designer_id = document.getElementById( "designer_id" );
 if( designer_id.value == "" )
 {
  error = " Please Select Designer";
  document.getElementById( "error_para1" ).innerHTML = error;
  return false;
 }

 var error="";
 var designerorder_id = document.getElementById( "designerorder_id" );
 if( designerorder_id.value == "" )
 {
  error = " Please Select Order";
  document.getElementById( "error_para2" ).innerHTML = error;
  return false;
 }


 var error="";
 var dproduct_id = document.getElementById( "dproduct_id" );

 if( dproduct_id.value == "" )
 {
  error = " Please Select Product";
  document.getElementById( "error_para3" ).innerHTML = error;
  return false;
 }
  
  alert("All Good");

}

<form >

        Designer : 
          <select  name="designer_id" id="designer_id" required>
            <option value="">Select Designer</option>
                 <option value="1">1</option>
          </select>

      Order : 


        <div id="ordernumbers">
          <select name="designerorder_id" id="designerorder_id" required>
            <option value="">Select Order</option>
             <option value="1">1</option>
          </select>
          </div>      

      Product

        <div id="productnumbers" name="dproduct_id"  required>
          <select id="dproduct_id" >
            <option value="">Select Products</option>
             <option value="1">1</option>
          </select>

        </div>
  <button type="submit" onclick="return validate(); ">Submit</button>
  <div id="error_para1">T</div>
  <div id="error_para2"></div>
  <div id="error_para3"></div>
  </form>

而对于接下来的那些你还没有那样做。所以下面的检查不起作用

if( designerorder_id.value == "" )

if( dproduct_id.value == "" )

Answer 2

您可以将此代码用于多个选择框

function multiple1()
{
var options = $('#dproduct_ids > option:selected');
         if(options.length == 0){
             alert('no value selected');
             return false;
         }
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="test" multiple="multiple" name="dproduct_ids" id="dproduct_ids" name="test[]">
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  </select>
<input type="button" value="submit" onclick="multiple1()">

在表单中选择选项下拉列表验证

2 个答案: