Keskustelu: Nettisivujen teko: JS: Jos käyttäjätunnus ei ole vapaa

$(document).ready(function() {
	$('#tarkista').load('check.php').show();

$('#tunnus_input').keyup(function() {
	$.post('check.php', {tunnus:rekisterointi.tunnus.value},
	function(result) {
		$('#tarkista').html(result).show();
	});
		});

});

Tämä ja tuo check.php yhdessä siis tarkistavat tietokannasta, onko käyttäjätunnus jo varattu. Ongelma vain on, etten ole ihan varma, miten lomakkeen lähetys voidaan estää jos käyttäjätunnus ei olekaan vapaa. Ideoita?

Lisäät lomakkeen lähetykseen event handlerin ja jos lomake ei validoidu (eli jossain kentässä virheellistä dataa), niin blokkaat vain submitin. Alla oleva esimerkki olettaa, että tuossa käyttäjänimen kentän validoinnissa inputille lisätään luokka invalid, jos se ei läpäise validointia. Homman voi tietysti hoitaa myös vähemmän geneerisesti esim. tarkistamalla vain kyseisen kentän tilan (eikä kaikkia mahdollisia kenttiä).

var form = $('#myform');

form.on('submit', function(e) {
  var invalid = form.find(':input.invalid');
  if (invalid.length > 0) {
    e.preventDefault();
  }
});

Sinun kannattaa hakea PHP-skriptiltä jotain muuta kuin HTML-dataa, esimerkiksi ihan tekstinä ykkönen tai nolla tai jokin JSON-muotoinen viesti. Kokonaisuus toimii jotenkin tähän malliin:

$('input[name=tunnus]').keyup(function() {
	var input = $(this);
	$.post(
		'check.php',
		{tunnus: this.value},
		function(result) {
			var tunnus_vapaa = (result == "1");
			if (tunnus_vapaa) {
				input.removeClass("invalid");
				$('#tulos').hide();
			} else {
				input.addClass("invalid");
				$('#tulos').text("Tunnus on jo käytössä!").show();
			}
		}
	);
});
$('form').submit(function(e) {
	if (form.find(':input.invalid').length > 0) {
		e.preventDefault();
	}
});

Tämä ei tietenkään saa toimia ainoana ko. asian tarkistajana. Todellinen tarkistus on tehtävä kuitenkin ennen inserttiä tai sen myötä.

jos softa sisältää client puolen validointeja, pitää ne luonnollisesti toteuttaa myös serveripuolella.