驗證有效，但未顯示警報/消息

Question

我意識到Safari與HTML5必需的功能不兼容，因此我嘗試添加Java驗證腳本。 該腳本阻止客戶前進，但未顯示警報OR消息。

<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST' id='formID'>"?>
<select class="productsize" id="sizeoption" name='size' required><span id="sizeoptionMSG" style="margin-left:6px;color:darkred;"></span>
    <option value=''>Select a Size</option>
    <option value='Small'>Small</option>
    <option value='Medium'>Medium</option>
    <option value='Large'>Large</option>
    <option value='XL'>XL</option>
 </select><br><br>
 <select class="productquantity" name='quantity'>
     <option value='1'>1</option>
     <option value='2'>2</option>
     <option value='3'>3</option>
     <option value='4'>4</option>
 </select>
</div><br><br>
<div class="productdetailaddbutton">


  <?php 
echo "<input type='hidden' name='product_id' value='$product_id' />
        <input type='submit' class='addtocart' name='add_to_cart' value='Add to cart' />";
    ?>


<script>
    var form = document.getElementById('formID'); // form has to have ID: 

<form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
        if (!event.target.checkValidity()) {
            event.preventDefault(); // dismiss the default functionality
            document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? 'Please, select a size' : ''; // Show message, NOT SHOWING UP
            document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border -- NOT SHOWING UP
            if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field -- NOT WORKING
            alert('Please, select a size.'); // error message -- NOT WORKING
        }
    }, false);

是否有人看到會導致其不顯示警報或消息的內容？ 我在JS中對那些不起作用的部分進行了評論。 同樣，驗證有效，但是未顯示消息或警報。

更新：

我在控制台中收到此錯誤：

未捕獲的TypeError：無法將屬性'innerHTML'設置為null

對於此行：

document.getElementById（'sizeoptionMSG'）。innerHTML = document.getElementById（'sizeoption'）。value ==''？ '請選擇一個大小' ： ''; //顯示訊息

更新以顯示當前的JS代碼：

    <script>
    var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
        form.noValidate = true;
        form.addEventListener('submit', function(event) { // listen for form submitting
    if (!event.target.checkValidity()) {
        event.preventDefault(); // dismiss the default functionality
        document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? '*Please, select a size' : ''; // Show message
        if(document.getElementById('sizeoption').value == '') {
        document.getElementById('sizeoption').className += 'invalid-input';
    } // color field's border
        if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field
        alert('Please, select a size.'); // error message
    }
}, false);
</script>

無效輸入的CSS：

.invalid-input {
border-color: #990000;
}

Answer 1

這不是您問題的答案，因為您的html無效：

這是我盡力將其更改為看起來不錯的方法：

<form action="itemsadded.php" method="post" id="formID">
  <div class="product-detail-quantity">
      <span id="sizeoptionMSG"></span>
      <select class="product-size" id="sizeoption" name="size" required>
          <option value="">Select a Size</option>
          <option value="Small">Small</option>
          <option value="Medium">Medium</option>
          <option value="Large">Large</option>
          <option value="XL">XL</option>
       </select>
      <select class="product-quantity" name="quantity">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
  </div>

  <div class="product-detail-addbutton">
      <input type="hidden" name="product_id" value="<?=$product_id;?>">
      <button type="submit" class="add-to-cart" name="add_to_cart">Add to cart</button>
  </div>
</form>

<script>
    var form = document.getElementById('formID'); // form has to have ID: 

    form.noValidate = true;
    form.addEventListener('submit', function(event) { // listen for form submitting
        if (!event.target.checkValidity()) {
            event.preventDefault(); // dismiss the default functionality
            document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? 'Please, select a size' : ''; // Show message, NOT SHOWING UP
            document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border -- NOT SHOWING UP
            if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field -- NOT WORKING
            alert('Please, select a size.'); // error message -- NOT WORKING
        }
    }, false);
</script>

您有錯誤打開和關閉的標簽。 另外，不允許您在select包含span 。

編輯：我只是意識到您在雙引號或單引號中沒有一致性。 我只是用一致的雙引號更改了上面的代碼。 我個人喜歡雙引號，因此，我始終將所有內容都用雙引號引起來。 另外，切勿將HTML包裝在PHP echo中。 僅將PHP echo或<?=$var;?>用於所需的部分（就像我做的那樣）。

編輯：也忘了提。 請勿使用<br>排列布局元素。 <br>僅應與文本一起使用。 如果您需要在選擇之間添加邊距，只需添加.productdetailquantity select { margin: 5px 0; }類的內容即可.productdetailquantity select { margin: 5px 0; } .productdetailquantity select { margin: 5px 0; } 。 這只是一個例子。 另外，對於具有可讀性的CSS類，請使用破折號/連字符或下划線分隔每個單詞。 例如， productsize product-size變為product-size

編輯：此外，如果您要向db或其他項目插入項目，也不要對表單使用“ ./itemsadded.php?view_product=$product_id”。 您已經通過字段發送$product_id ，因此“ itemsadded.php”就足夠了。 您也不需要“ ./”，因為它已經在檢查相對於當前路徑的路徑。

編輯：對於以下行：

document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border -- NOT SHOWING UP

不要那樣做 您可以在類中為此類設置樣式，然后通過JS添加類：

if(document.getElementById('sizeoption').value == '') {
    document.getElementById('sizeoption').className += ' invalid-input';
}

另外，我認為在整體情況下，jQuery將更好地滿足您的需求。 使用jquery，上面的代碼將如下所示：

 $('#formId').submit(function(e) {
     if(e.target.checkValidity()) {
         e.preventDefault();
         if($('#sizeoption').val() == '')) {
             $('#sizeoption').addClass('invalid-input');
         }
         // ...
     }
 }