Pagina 1 din 1

schimbare mesaj required la validare input

Scris: Joi Mar 29, 2018
de sterica
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!

schimbare mesaj required la validare input

Scris: Vin Mar 30, 2018
de MarPlo
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.

schimbare mesaj required la validare input

Scris: Vin Mar 30, 2018
de sterica
Multumesc frumos pentru ajutor!