Custom Validation and error message for Custom Select-CodePudding

function setError(input, message) {
  const form = input.parentElement;
  const small = form.querySelector('small');
  small.innerText = message;
  form.className = 'inputfield error';
}

function setSuccess(input) {
  const form = input.parentElement;
  form.className = 'inputfield success';
}

Here is my JavaScript code for setting error or success to the input fields. It is working fine for the inputs.

but when I am trying to apply the same code for custom select boxes it is not working. I am new to web development so any sort of help would be appreciated.

reference Input Field Code :

  <div >
    <label>NID</label>
    <input type="text" value=""  id="nid" onkeyup="checkNid()">
    <small>Error Message</small>
  </div>

reference Custom Select Code :

  <div >
      <label>Gender</label>
      <div >
        <select name="gender" id="gender">
          <option value="">Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="Others">Others</option>
        </select>
      </div>
      <small>Error Message</small>
    </div>

Here is the output. I am expecting the same sort of error message for the select fields too: output

CodePudding user response：

Replace your reference Custom Select Code with this:

<div>
  <label>Gender</label>
  <div >
    <select name="gender" id="gender">
      <option value="">Select</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="Others">Others</option>
    </select>
     <small>Error Message</small>
  </div>
</div>

If you had shared your CSS file, I would have suggested how to style it better.

CodePudding user response：

 .wrapper .form .inputfield .custom_select {
  position: relative;
  width: 100%;
  height: 37px;
}

.wrapper .form .inputfield .custom_select:before {
  content: '';
  position: absolute;
  top: 12px;
  right: 10px;
  border: 8px solid;
  border-color: #d5dbd9 transparent transparent transparent;
  pointer-events: none;
}

.wrapper .form .inputfield .custom_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid #d5dbd9;
  border-radius: 3px;
}

helere is the css for the custom selection