Problem With Display Error Message In Span Element When Validation

Could you suggest how to show the error message not after element with id #genderError but insert it inside? errorPlacement: function(error, element) { if (element.attr('name')

Solution 1:

document.getElementById('#genderError').innerHTML = error; 

Or if you're using jQuery:

$('#genderError').html(error);

or

$('#genderError').text(error);`

if you just need to set the text.

Solution 2:

You can manage multiple conditions inside errorPlacement.

Like below -

errorPlacement: function(error, element) {
            if (element.attr("name") == "genderError") {
                $('#genderError').html(error); //or
                //$('#genderError').after(error);
            }
            else {
                if (element.hasClass("chosen-select")) {
                    error.insertAfter(element.next('div.chosen-container'));         
                }
                else {
                    error.insertAfter(element);  
                }
            }
        }

Solution 3:

May i introduce a CSS form validation as a workaround solution?

<form>
  <label for="male">male</label>
  <input type="radio" name="gender" value="male"id="male" required>
  <label for="female">female</label>
  <input type="radio"id="female" name="gender" value="male" required>
  <span class="errMsg"></span>
</form>

input:invalid ~ .errMsg::after {
  content: '\2717';
  color: red;
}

input:valid ~ .errMsg::after {
  content: '\2713';
  color: green;
}