Question

我意识到Safari与HTML5所需功能不兼容，因此我尝试添加Javascript验证脚本。该脚本阻止客户向前移动，但警报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：无法设置null

的属性'innerHTML'

对于这一行：

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>

您的标签被错误地打开和关闭。此外，您不能在span内拥有select。

编辑：我刚刚意识到你在双引号或单引号中没有一致性。我只是用一致的双引号更改了上面的代码。我个人喜欢双引号，所以，我总是用双引号保留所有内容。此外，永远不要将HTML包装在PHP回显中。仅对所需部分使用PHP echo或<?=$var;?>（就像我做的那样）。

编辑：也忘了提。不要使用<br>来排列布局元素。 <br>只应与文字一起使用。如果您需要在选择之间留出余量，只需在CSS中添加.productdetailquantity select { margin: 5px 0; }之类的内容即可。这只是一个例子。此外，对于具有可读CSS类，使用短划线/连字符或下划线分隔每个单词。 E.g productsize变为product-size

编辑：此外，永远不要＆＃34; ./ itemsadded.php？view_product = $ product_id＆＃34;如果您尝试将项目插入数据库或其他任何内容，请使用表单。您已经通过字段发送$product_id，因此＆＃34; itemsadded.php＆＃34;就够了。你也不需要＆＃34; ./"因为它已经在检查相对于当前路径的路径。

编辑：对于以下行：

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');
         }
         // ...
     }
 }

验证工作正常，但不显示警报/消息

1 个答案: