Validate multiple fields and showing a message - javascript

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>

Related

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>

How to make popup only invoke when form is actually submitted javascript

I have the following form:
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" required>
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" required>
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
I built a little popup that says thanks for signing up that should come up after the user has entered his data. However at the moment I have the problem that it also comes up when the user clicks the register button without entering any data (meaning the request does not fire due to the required tags in the fields). How do I make the popup only come up when the form is actually submitted?
Jquery for the popup:
$(window).load(function() {
$(".form-button").click(function() {
$('.popup').show();
});
});
I think you might be looking for the .submit event.
Using your example
$('.register-form').submit(function(e){
e.preventDefault(); // Stop the form submitting
$('.popup').show(); // Show the popup
e.currentTarget.submit(); // Now submit it!
});
Simply define ids on your each input to validate if both fields have value in it or not. Do like this
<form action="/signup" method="post" class="register-form">
<div>
<div class="form-element">
<label class="form-label" for="name">Name</label>
<input class="form-input-text" type="text" name="name" value="" id="text1">
</div>
<div class="form-element">
<label class="form-label" for="email">E-Mail</label>
<input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
</div>
<button class="form-button" type="submit" name="submit">Register</button>
</div>
</form>
$(window).load(function() {
$(".form-button").click(function() {
let input1 = $('#text1').val();
let input2 = $('#input2').val();
if(input1 && input2){
//make your http req and then after getting your response open your popup
$('.popup').show();
}
});
});

send string query alongside user name and password ajax

I want to send command=login& string along side username and password collected from the form, like
login.php?command=login&name=something&password=main
<form id="login" action="https//login.php" method="GET">
<fieldset>
<label for="name">Email</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<label for="password">password</label>
<input type="password" id="password" name="password">
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
$('#login').on('click', function(e) {
e.preventDefault();
data: "command=login&" + ('#login').serialize(),
$.get('https://login.php', data, function() {
// $('#').html(data);
});
});
You can do:
$.get('https://login.php?command=login&' + $('#login').serialize(), function() {
// $('#').html(data);
});
Add a hidden input field to your form. You should also be sending the form via POST and not GET since you are sending sensitive information.
<form id="login" action="https://login.php" method="POST">
<input type="hidden" name="command" value="login">
<fieldset>
<label for="name">Email</label>
<input type="email" id="email" name="email" >
</fieldset>
<fieldset>
<label for="password">password</label>
<input type="password" id="password" name="password" >
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
Then remove the string portion from your data attribute like this:
$('#login').on('click', function(e) {
e.preventDefault();
let data = $('#login').serialize()
$.post('https://login.php', data, function(results) {
// $('#').html(results);
});
});

HTML/JavaScript: How to detect a blank submission Form?

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.

Disable button on submit and enable native form validation

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>

Categories