javascript - 如何使用 JavaScript 验证下拉列表？

Question

当我提交按钮而不选择任何选项时，我会显示错误。它可以工作。但是当我在选择任何选项后点击提交时，这里的问题仍然存在。如果选择了选项，我将无法删除错误。

selected.Can anyone help me please

<form id="myForm">     
  <select  id="logs" data-placeholder="Type here to find device"
            name="tags[]"
            multiple
            class="chosen-select form-control"
            required>
    <option value=""></option>
    <option value="ASA"     > ASA     </option>
    <option value="ISE"     > ISE      </option>
    <option value="Windows" > Windows  </option>
    <option value="ATA"     > ATA      </option>
    <option value="Alliance"> Alliance </option>
    <option value="Proxy"   > Proxy    </option>
    <option value="Csp"     > CSP      </option>
  </select>
  <button type="submit">Submit</button>
  <p id="loggingError" style="color: red; font-size: small;"></p>
</form>

var logs = document.getElementById('logs');
var myForm = document.getElementById('myForm');

function loggingCheck(event)
{
  if (logs.selectedIndex == 0 )
  {
    document.getElementById('loggingError').innerHTML="Please select at least one logging devices";
    event.preventDefault();
  }
  else
  {
    document.getElementById('loggingError').innerHTML="";
  }
}

myForm.addEventListener('submit',loggingCheck);

标签： javascript

Answer 1

如果您正在使用该required属性并希望使用自己的消息，则必须管理reportValidity和setCustomValidity方法

const myForm = document.getElementById('my-form')

myForm['tags[]'].oninvalid = evt =>
  {
  evt.target.setCustomValidity('Please select at least one logging devices')
  }
myForm.oninput = evt =>
  {
  //  if (evt.target.name==='tags[]') ...
  evt.target.setCustomValidity('')
  evt.target.reportValidity()
  }
myForm.onsubmit = evt => // if the form has error the submit event doesn't happen
  {
  evt.preventDefault()
  console.log('the form is now supposed to be submitted...')
  setTimeout(() => { console.clear() }, 2000) // clear log about 2s;
  }

input:invalid { border-color: crimson; }

<form id="my-form">

  <select name="tags[]"  multiple required size="7">
    <option value="ASA"     > ASA      </option>
    <option value="ISE"     > ISE      </option>
    <option value="Windows" > Windows  </option>
    <option value="ATA"     > ATA      </option>
    <option value="Alliance"> Alliance </option>
    <option value="Proxy"   > Proxy    </option>
    <option value="Csp"     > CSP      </option>
  </select>

  <button type="submit">Submit</button>

</form>