Problem with display error message in span element when validation

Question

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") == "myoptions" ) error.insertAfter('#genderError'); 
    },

use `$('#genderError').append(error)` to `add `it to the end of the element or `$('#genderError').prepend(error)` to add it to the start. or `$('#genderError').html(error)` to `swap` the inner HTML of the element with the content of `error`. But this should be googled, not asked here. [insert jquery](https://www.google.com/search?client=firefox-b-d&q=jquery+insert+in+element) gives you something lik 3 mil posts — Lapskaus, Mar 12 '20 at 11:35

score 1 · Answer 1 · answered Mar 12 '20 at 10:55

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.

answered Mar 12 '20 at 10:55

Clarity

10,730
2
25
35

score 0 · Answer 2 · answered Mar 12 '20 at 11:12

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;
}

score 0 · Accepted Answer · answered Mar 12 '20 at 11:20

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);  
                }
            }
        }

@Dimtriy, Thanks for approving my answer. – Alok Mali Apr 05 '20 at 07:45 — Alok Mali, Apr 05 '20 at 07:45

Problem with display error message in span element when validation

3 Answers3

Linked