Stop sending with empty input values

Question

Im looking for a simple solution to stop the registration form from sending empty input fields. The code for the form is shown below. I would like to use a simple Javascript soluiton if possible.

<form id="login" method="post" action=""> <input type="text" name="email" id="email" /> <input type="password" name="pwd" id="pwd" /> <button type="submit" id="submit">Login</button> </form> 

If possible, I would also like to change the border of the empty field (s).

Thanks in advance.

Answer 1

Sample code with dummy checks:

 <script type="text/javascript"> function checkForm(form) { var mailCheck = checkMail(form.elements['email']), pwdCheck = checkPwd(form.elements['pwd']); return mailCheck && pwdCheck; } function checkMail(input) { var check = input.value.indexOf('@') >= 0; input.style.borderColor = check ? 'black' : 'red'; return check; } function checkPwd(input) { var check = input.value.length >= 5; input.style.borderColor = check ? 'black' : 'red'; return check; } </script> <style type="text/css"> #login input { border: 2px solid black; } </style> <form id="login" method="post" action="" onsubmit="return checkForm(this)"> <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> <button type="submit" id="submit">Login</button> </form> 

Answer 2

Possible approach:

• installation action
• adding a handler to the submit button or onsubmit form
• change the action of the form if the text fields are not empty

Edit: To do this, even for non-javascript users, insert # -action when the page loads.

Answer 3

To keep it minimal, I would simply use:

 <form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}"> 

Provided - does not indicate that the user does not like, but works with pleasure.