schimbare mesaj required la validare input

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje: 285

schimbare mesaj required la validare input

Salutare,

Am un input de tip data si vreau sa ii schimb mesajul de required in functie de o conditie.

Cod: Selectaţi tot

<input type="date" id="data" required onchange="dataActiv()">

<script>
    function dataActiv() {
    	var inputDate = document.getElementById('data');
        var selDate = new Date(document.getElementById('data').value);

        if (selDate <= new Date()){
            console.log('nu poti selecta o data mai mica decat data curenta');
            inputDate.value = ''";
        }
    }
</script>
Inputul este actionat de un button de submit.
In codul de mai sus, in if() cum pot sa modific mesajul de required cu cel care este setat sa apara in consola?
Multumesc!

MarPlo Mesaje: 4343
Salut,
Se poate folosind evenimentul "invalid", metoda reportValidity() pentru emiterea acelui eveniment si setCustomValidity() pentru definirea mesajului de validare.

Cod: Selectaţi tot

<input type="date" id="data" required onchange="dataActiv()" oninvalid="invalidMsg(this);">
<script>
var inputDate = document.getElementById('data');
function dataActiv() {
  var selDate = new Date(inputDate.value);

  if(selDate <= new Date()){
    inputDate.value =''; //set empty to detect as invalid when calls invalidMsg()
    inputDate.reportValidity(); //to emit invalid event that calls invalidMsg()
    console.log('nu poti selecta o data mai mica decat data curenta');
  }
}

//emited to check if $elm field value is valid
function invalidMsg(elm){
  if(elm.value =='' || elm.validity.typeMismatch) {
    elm.setCustomValidity('Selectati o data mai mare decat ce curenta');
  }
  return true;
}
</script>
- Demo:
For test, select a date lower then curent date.

sterica Mesaje: 285
Multumesc frumos pentru ajutor!

Subiecte similare