Disable button on submit and enable native form validation - javascript

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>

Related

Automatic filling of identical registration fields at the same time

I need to help. I have a next form
<form action="" method="POST">
<input type="email" name="email">
<input type="email" name="email-repeat">
<input type="password" name="password">
<input type="password" name="password-repeat">
<input type="submit" value="">
</form>
and I want when I reload to page, that browser to autocomplete all fields from saved data in the browser(email and password) twice password and twice email. I tried a few combinations with attribute of autocomplete, but nothing.
You should add autocomplete="off" to the inputs that you don't want to be filled automatically.
<input autocomplete="off" type="email" name="email">
<input autocomplete="off" type="email" name="email-repeat">
<input autocomplete="off" type="password" name="password">
<input autocomplete="off" type="password" name="password-repeat">
<input type="submit" value="">
You can find details in MDN

How to add a form validation using JavaScript?

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>

Validate multiple fields and showing a message

I have a pretty simple form. I want to show the message "Please say something! I want to hear from you!" on my website when people leave the fields empty. How to go about it ?
<form action="/action_page.php">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email</label>
<input type="text" id="email" name="email"><br><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment"><br><br>
<input type="submit" value="Submit">
</form>
Here's one way to do it. You listen for the submit from the button and when that happens you stop the form from submitting with event.preventDefault(), so you can check the values. We set up the form fields in an array called check, so we can loop through them and check for their value. If the value is empty, we make a note of that in a error array. At the end, we check to see if there are errors and if so, display the alert. If not, allow the form to submit.
document.querySelector('input[type=submit]').addEventListener('click', function(e) {
e.preventDefault(); // stop the form from submitting
let form = document.querySelector('form');
let check = ['name', 'email', 'comment'];
let error = [];
check.forEach(field => {
if (form.querySelector('#' + field).value.trim() === '') {
error.push(field);
}
})
if (error.length > 0) {
alert('Please say something! I want to hear from you! The following fields are missing information: ' + error.join(", "));
} else {
form.submit();
}
})
<form action="/action_page.php">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email</label>
<input type="text" id="email" name="email"><br><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment"><br><br>
<input type="submit" value="Submit">
</form>
Add the required attribute to your inputs and the novalidate attribute to the form (so we can use our own validation). Then, use form.checkValidity() to check whether all fields have been filled in.
document.querySelector('form').addEventListener("submit", function(e) {
if (!this.checkValidity()) {
document.querySelector('#error').style.display = 'block';
e.preventDefault();
}
})
#error {
display: none;
color: red;
}
<form action="/action_page.php" novalidate>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email</label>
<input type="text" id="email" name="email" required><br><br>
<label for="comment">Comment</label>
<input type="text" id="comment" name="comment" required><br><br>
<input type="submit" value="Submit">
</form>
<p id="error">Please say something! I want to hear from you!</p>

How to join input to form

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
}

Avoid default warnings in form -Angular js

While validating a user form am getting a default form validation pop up like this:
Here's the form with code:
<form name="myForm">
<input type="text" class="form-control" required
data-ng-model="entity.name" name="name"
placeholder="Pit Name">
</form>
<button type="button" ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
There is a save button which on click am getting the above pop up.How can I disable that pop up?
You can use novalidate like
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

Categories