HTML 5 require validácia JavaScript

Fórum › JavaScript, AJAX, jQuery

Ján

~ Anonymní uživatel
~ 187 příspěvků

21. 12. 2017 #1

Ahojte,

rád b som ešte pred odoslaním formu cez JS aspoň základne validoval cez HTML5 cez atribúty ako require alebo aj typ inputov ako email a pod. A až potom zavolal JS, príde mi to lepšie takto jednoducho validovať a neskôr na strane PHP ešte ošetriť. Ako to spraviť? Mám toto JS na odosielanie:

<script>
function SubmitFormData() {
$('#businessname').attr('required', 'required');
    var name = $("#name").val();
    var email = $("#email").val();
    var phone = $("#phone").val();
    var gender = $("input[type=radio]:checked").val();
    $.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
    function(data) {
	 $('#results').html(data);
	 $('#myForm')[0].reset();
    });
}


</script>
</head>
<body>
  <form id="myForm" method="post">
     Name:    <input name="name" id="name"  type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Phone No:<input name="phone" id="phone" type="text" /><br />
     Gender:  <input name="gender" type="radio" value="male">Male
	      <input name="gender" type="radio" value="female">Female<br />

    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
   </form>

Skúšal som dané atribúty, ale JS a odosielanie ich ignoruje, ako to mám upraviť aby to bralo v úvahu?

Ďakujem pekne :)

Nahlásit jako SPAM

IP: 95.105.210.–

peter

~ Anonymní uživatel
~ 4016 příspěvků

21. 12. 2017 #2

$.post to odesila. Takze, pokud chces delat nejake upravy, tak predtim. Treba pridat if (zkontroluj(data)) {odesli(data);} else{vypis_error(data);})

Navic, tahal bych to do pole a ne do jednotlivych promennych. S tim se pak o neco lepe pracuje.

XXX
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var gender = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, email: email, phone: phone, gender: gender },...
XXX

var data = {
  name: $("#name").val(),
  email : $("#email").val(),
  phone : $("#phone").val(),
  gender : $("input[type=radio]:checked").val()
  };
if (zkontroluj(data))
  {$.post("submit.php", data, odpoved };}
else
  {chyba(data);}
function zkontroluj(data) {...}
function chyba(data) {...}
function odpoved (dataodpovedi) {
  $('#results').html(dataodpovedi);
  $('#myForm')[0].reset();
});

Nahlásit jako SPAM

IP: 2001:718:2601:258:a1e9:60...–

peter

~ Anonymní uživatel
~ 4016 příspěvků

21. 12. 2017 #3

Jo, ono to mozna neni jasne, ale function zkontroluj(data) by melo vratit return true pro dataok a return false pro chybu.

Nahlásit jako SPAM

IP: 2001:718:2601:258:a1e9:60...–

Ján

~ Anonymní uživatel
~ 187 příspěvků

21. 12. 2017 #4

#3 peter
Ďakujem ale asi som to zle napísal, alebo pochopil.

Ide mi o to, že HTML5 už má vnorené atribúty a možnosti, ktoré kontrolujú ešte pred POST.

Napr.

<input type="number"> ...

Pri normal POST to nepustí, pokým to nemá požadovanú hodnotu, pri tomto JS to zbehne či to tam je definované, alebo nie. Hľadám a teda niečo, čo bude brať tieto HTML5 atribúty v úvahu.

Ďakujem.

Nahlásit jako SPAM

IP: 95.105.210.–

peter

~ Anonymní uživatel
~ 4016 příspěvků

22. 12. 2017 #5

Kdyz neco nevim, zeptam se nejdriv googlu :)
google = javascript input email
Treba takova nahodna stranka, neco tam bude...
https://developer.mozilla.org/…/input/email

Nicmene, kdyby ti nevadilo, ze to neodchazi pres $.post, ale odesila se formular, tak formular ma udalost <form onsubmit="mojeFunkce();">. Kdyz mojeFunkce vrati true (return true), formular se odesle, jinak nee. Funkce, bez return vraci vzdy true. Cili, misto type=button to zmenis na submit a tu funkci presunes z tlacitka pod form. Nedavej tam ale id=submit ani name=submit.
A pak je moznost, misto $.post tam napsat form.submit(). Opet, nedavej zadnemu tlacitku ani inputu id=submit ani name=submit, protoze pak javascript pri form.submit bude chtit pracovat s inputem, misto aby formular odesilal.

document.getElementById('myForm').submit()
document.forms[0].submit()
document.forms['mujform'].submit() // <form name=mujform>
$('#myForm').submit() // tady si ale nejsem jisty zapisem, jquery to mozna ma jinak nez javascript

Nahlásit jako SPAM

IP: 2001:718:2601:258:8c0b:61...–

← Zpět na seznam vláken ← Zpět do Fóra