JSFiddle - React, Tailwind, and code Playground

by Martin Miranda

HTML

<form id="form1">
    <input type="text" required title="Lütfen işaretli yerleri doldurunuz" />
    <input type="submit">
</form>

<form id="form2">
    <input type="text" required />
    <input type="submit">
</form>

CSS

form {
    margin-bottom: 20px;
}

JavaScript

$('#form2 input[type=text]').on('change invalid', function() {
    var textfield = $(this).get(0);
    
    // 'setCustomValidity not only sets the message, but also marks
    // the field as invalid. In order to see whether the field really is
    // invalid, we have to remove the message first
    textfield.setCustomValidity('');
    
    if (!textfield.validity.valid) {
      textfield.setCustomValidity('Lütfen işaretli yerleri doldurunuz');  
    }
});