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
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.
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:
Make sure the submit button is within the <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'...>.
Each field has a required attribute so it can be validated when the "submit" event is triggered, the first blank <input> will have a popup.
The first <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>
Related
Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!
If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}
This is my code:
<form action="/login" method="POST">
<label for="username">Username: </label><input type="text" name="username" id="username">
<label for="password">Password: </label><input type="password" name="password" id="password">
<label for="enc_key">Encryption Key: </label><input type="password" name="enc_key" id="enc_key">
<input type="hidden" name="next_page" value="{{ next_page }}">
<input type="submit" value="submit" id="login_submit">
</form>
Basically I want the username and password to post, but I do not want the enc_key to post. The enc_key is handled by javascript. Is there a way to do this without moving the enc_key input field outside of the form tags?
Try removing the name attribute.
You will still be able to handle your enc_key with the ID, but the input without a name won't be posted.
The easiest thing to do would be to clear that field right before the form posts:
document.getElementById("enc_key").value = '';
below is a simple form requesting user feedback.
Using HTML and/or JavaScript, how do you create an alert box that pops up whenever it detects the the entire Form or a portion of the Form is blank? E.g. whenever the user clicks to submit a blank/incomplete form, alert box: "You forgot to fill out Name/Email/Comments".
Thanks lot.
<div>
<form method="post" enctype="text/plain" action="MAILTO:name#example.com">
Your Name<br>
<input type="text" size="40" name="name">
<br><br>
Email Address<br>
<input type="text" size="40" name="email">
<br><br>
Any Comments or Questions?<br>
<textarea name="comments" rows="8" cols="40"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<br><br>
</form>
</div>
You could use HTML5 required attribute for this
<div>
<form method="post" enctype="text/plain" action="MAILTO:name#example.com">
Your Name<br>
<input type="text" size="40" name="name" required>
<br><br>
Email Address<br>
<input type="text" size="40" name="email" required>
<br><br>
Any Comments or Questions?<br>
<textarea name="comments" rows="8" cols="40"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<br><br>
</form>
</div>
Expand your Form Tag
<form onsubmit="return validate();" method="post" enctype="text/plain" action="MAILTO:name#example.com">
Basic info here: The validate() method is called whenever you try to submit the form. The boolean return of the validate() function decides if the form is sumbmitted or not.
For convenience, add id attributes to all fields. Example:
<input type="text" size="40" name="email" id="email">
The validate() method
This is the heart of your form test.
<script type="text/javascript">
function validate()
{
var messages = new Array();
if (document.getElementById('email').value.length == 0)
{
messages.push('E-Mail missing');
}
if (document.getElementById('name').value.length == 0)
{
messages.push('Name missing');
}
if (0 == messages.length)
{
return true;
}
// Do something with the messages array
return false;
}
</script>
Have fun.
If you know javascript it's a piece of cake.If not, you can use this.
Browsers have a nice tooltip that appears when a field with the required attribute has not been filled in.
<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="this.disabled=true;this.value="Submitted...";this.form.submit()">
</form>
The problem is I have this submit button disabled when the user submits the form so it wouldn't be submitted multiple times, and after submitting (even if the required field is empty) the form still submits. Is there a fix so that the browser will check on the required fields before submitting?
You need to make sure that the required fields are actually filled in before you disable the submit button.
<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="if (document.getElementsByName('name')[0].value != null) {
this.disabled=true;
this.value='Submitted...';
this.form.submit();
}">
</form>
Or you could use document.querySelectorAll() for multiple required ones:
<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Full name" required>
<input type="text" name="name" placeholder="Email address" required>
<input type="text" name="name" placeholder="Phone number">
<input type="submit" onclick="for (x in document.querySelectorAll('input[type=text][required]')) {
if (document.querySelectorAll('input[type=text][required]').value != null) {
this.disabled=true;
this.value='Submitted...';
this.form.submit();
}
}">
</form>
I have two forms in one page and i would like to validate each form separately DEPENDING on what the user fills. So basically the user must fill only ONE form and NOT both of them...SO basically if the user fills up form number 1, the validation will be on form 1 ONLY..
Below please find the code of both forms:
<form action="/registration.flow" method="post" id="formElem1" name="formElem1" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
<form action="/registration.flow" method="post" id="formElem2" name="formElem2" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
Can someone help me please?
You don't need jQuery specifically to do this. Simple javascript is fine. Call a separate function for the onSubmit of each form.
onSubmit="return validateForm1(this);"
and -
onSubmit="return validateForm2(this);"
Make sure you return true or false depending on if the form passed or failed the validation.
I recommend you the jquery validator . It's easy to use and you can do the two validations separately.