HTML5 и Javascript events

[nbacool2]

Здравейте. Имам следния код . Как мога да направя така, че първо от HTML5 да провери полетата и чак тогава да се задейства JavaScript функцията. В момента като натисна бутона submit и веднага се задейства checkEmail()

<! DOCTYPE html>
<html>
	<head>
		<style type='text/css'>
			fieldset {
				width:300px;
			}
		</style>
		<script type="text/javascript">
			function checkEmail() {
				var email= document.getElementById('email');
				var repemail= document.getElementById('repemail');
				if (email.value != repemail.value) {
					alert('Email-ите не съвпадат. Iтраницата ще се refresh-не.');
					window.location.reload();
				}
			}
		</script>
	</head>
	<body>
		<fieldset>Account information<br>
			<form method='post' action='#'>
			<label for='username'>Username</label> <input type='text' name='username' placeholder='enter your name' ><br>
			<label for='password'>Password</label> <input type='password' name='password' placeholder='enter your password'><br>
			<label for='reppassword'>Repeat Password</label> <input type='password' name='reppassword' placeholder='repeat your password'><br>
			<label for='email'>Email</label> <input type='email' id='email' placeholder='enter your email'  pattern="[^ @]*@[^ @]*" autofocus required><br>
			<label for='repemail'>Repeat Email</label> <input type='email' id='repemail' placeholder='repeat your email'  pattern="[^ @]*@[^ @]*" required><br>
			<label for='url'>URL</label> <input type='url' name='url' required placeholder='Enter a valid URL'><br>
			<input type='submit' name='submit' value='Send' onsubmit='checkEmail()'>
				
			</form>
		</fieldset>
	</body>
</html>

 

[exec]

HTML5 проверката си работи нормално, но вероятно използваш IE и както се вижда, не използваш никакъв JS код за да коригираш поведението на IE (и Safari). Добави например това:

А може да си оправиш и първия ред - няма интервал между ! и DOCTYPE

 

[nbacool2]

С Google Chrome се получава така, а пък с onsubmit на бутона изобщо не се и изпълнява скрипта.

 

[exec]

Функцията при събмит бутона не ти работи, защото onsubmit е събитие, свързано с формуляра, не с бутона.

С други думи, или трябда да ползваш това:
<form method='post' action='#' onsubmit='checkEmail()'>
....
<input type='submit' name='submit' value='Send'>
</form>

или това:
<form method='post' action='#'>
.....
<input type='submit' name='submit' value='Send' onclick='checkEmail()'>
</form>


Или onsubmit на формуляра, или onclick на бутона.

 

[nbacool2]

Благодаря със onsubmit на <form> тага се получи супер. +1 съпорт