I have 3 fields which I want to validate
<form name='Login' method='post' target='_self'>
<div class="loginPic"...>
<input id="accountLoginField" class="loginEmail" type="text" name="account" value="" placeholder="">
<input id="userLoginField" class="loginUsername" type="text" name="user" value="" placeholder="">
<input id="passLoginField" class="loginPassword" type="password" name="password" value=""
placeholder=""> ....
And I have submit input
<input id="btn_login" type="submit" name="submit" class="buttonM bBlue" value="Connect">
How can I check if these fields are empty and show alert box? I tried diferent ways that I found here and on other sites, but none of them seems to work... Thank you
The following example will submit to a live test server and the response will be displayed in an <iframe> for demonstration purposes. Client side validation is minimal and of course the server should do the heavy lifting when it comes to validation. Here are the major points:
<form>. If for some reason it isn't, add form="*" to it ("*" is the id of <form>). Although it's totally valid for <form> to have a name, an id is more useful so in example <form id='login'...>.required attribute so it can be validated when the "submit" event is triggered, the first blank <input> will have a popup.<input> type has been changed to "email" so validation will stop submission should the user forget @.<form id='login' action='https://httpbin.org/post' method='POST' target='response'>
<fieldset>
<input name="account" type="email" placeholder="Email address" required>
<input name="user" type="text" placeholder='User name' required>
<input name="password" type="password" placeholder="Password" required>
<input type="submit" value="Connect">
</fieldset>
</form>
<label>These two buttons are outside of form.</label><br>
<input type='submit' form='login' value='Works'>
<input type='submit' value="Doesn't Work"><br>
<iframe name='response'></iframe>You can validate using if and else and check with the values attribute like, this the sample code you can refer for,
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
Likewise, you can check for every field.