I'm working on a php program that uses form validation. I left the "errorMessage" div blank in order to update it upon an invalid entry.
Below is the html/bootstrap code.
<div class="container">
<large><h1>Get in touch!</h1></large>
<div class="alert alert-success" role="alert" id="successMessage"></div>
<div id="errorMessage"></div>
<form method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<small class="form-text text-muted">We'll never share your email with anyone else</small>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" name="subject">
</div>
<div class="form-group">
<label for="question">What would you like to ask us?</label>
<textarea type="text" class="form-control" id="question" name="question" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submitButton">Submit</button>
Below is my Jquery/Javascript code. This is intended to check for an invalid entry and to put error text in the blank div.
<script type="text/javascript">
$("form").submit(function (e) {
e.preventDefault();
var error= "";
var fieldsMissing = "";
var successMessage = "";
if($("#subject").val() == "") {
error += "<p>The subject field is missing</p>";
}
$("#errorMessage").html(error);
}
});
Related
I will try to make it short as possible. I have built a signup form for my project using bootstrap 5 validators and I'm facing a problem with the retype password input, if the user writes a password that didn't match the password he wrote earlier the green border of the input keep showing and the red border not showing not red and the jquery script of password comparison is actually working. here is my code I hope you understood my issue :
<div class="tab-pane fade" id="nav-signup" role="tabpanel" aria-labelledby="nav-signup-tab">
<form class="row row m-auto p-5 g-2 needs-validation" method="post" action="../public/include/signup.inc.php" id="reg-form" novalidate>
<div class="col-md-3">
<input type="text" class="form-control" id="Fname" minlength="3" maxlength="12" placeholder="First Name..." onclick="validate()" autofocus required>
<div class="valid-feedback" id="fnvt">
Looks good !
</div>
<div class="invalid-feedback" id="fnvf">
</div>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="LName" placeholder="Last Name..." required>
<div class="valid-feedback" id="lnvt">
Looks good!
</div>
<div class="invalid-feedback" id="lnvf">
</div>
</div>
<div class="col-md-3">
<input type="email" class="form-control" id="email" maxlength="50" placeholder="Enter your email..." required>
<div class="valid-feedback" id="emvt">
Looks good!
</div>
<div class="invalid-feedback" id="emvf">Email not correct !</div>
</div>
<div class="col-md-3">
<input type="password" class="form-control no-validate" name="pw1" minlength="6" maxlength="24" id="pw1" placeholder="Enter a password..." required >
<div class="valid-feedback" id="pwvt1">
Looks good!
</div>
<div class="invalid-feedback" id="pwvf1">Enter a password !</div>
</div>
<div class="col-md-3">
<input type="password" class="form-control" name="pw2" id="pw2" placeholder="Retype your password..." minlength="6" required>
<div class="valid-feedback" id="cpvt"></div>
<div class="invalid-feedback" id="cpvf">Password not match</div>
</div>
<div class="col-md-3">
<input type="tel" value="05" maxlength="10" minlength="10" aria-describedby="inputGroupPrepend" placeholder="Phone number..." class="form-control" id="phone" onkeypress="validate(event)" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Write a correct phone number.
</div>
<div class="valid-feedback">
</div>
<div class="col-15 mt-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" style="font-family: Tajawal; color: #fff;" for="invalidCheck">
By signing up, I agree to the terms and coniditons of the platform !
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
<div class="justify-content-center mt-4" action="?" method="POST">
<div class="mt-2 g-recaptcha" data-sitekey="your_site_key">
<div class="invalid-feedback"></div>
</div>
<br/>
<div class="col-12 mt-3">
<button class="btn btn-primary" name="submitup" type="submit">Register</button>
</div>
</div>
</form>
Bootstrap 5 validation script :
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
jquery password compare :
$(document).ready(function(e){
$("#reg-form").submit(function(event){
let $pw1 = $("#pw1");
let $pw2 = $("#pw2");
let $error = $("#cpvf");
let $true = $("#cpvt");
if ($pw1.val() === $pw2.val()) {
return true;
}if ($pw1.val() !== $pw2.val()) {
$error.text("Password not Match");
event.preventDefault();
}
});
})
here is an example of the problem, the code is working but the retype border is green and it is supposed to show a red border.
best regards.
I create a form.
How do I prevent a form from submitting using jQuery?
<form id="form">
<div class="container form-group">
<h1 class="mb-5">Get in touch!</h1>
<div id="error"></div>
<label for="email">Email Address:</label>
<input type="email" name="email" class="form-control" id="email" />
<small class="text-muted d-block mb-3">we never share your email</small>
<label>Subject:</label>
<input type="text" name="text" class="form-control mb-3" id="subject" />
<label for="message">Message:</label>
<textarea
name="message"
id="content"
rows="3"
class="form-control mb-3"
></textarea>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</form>
This is my jQuery code:
$(document).ready(function () {
$("#form").submit(function (e) {
e.preventDefault();
});
});
Unfortunately, the page refreshes again
I don't know where the problem comes from
I have a website that I've included a small form in. It simply asks for Email, Name and a small comment box.
I added it a few days ago and saw that people would randomly click it and I would receive empty submissions in my inbox.
Now, I've added a 'required' tag on all three HTML elements. That works... but only after the first attempt goes through...
Can any explain why that would be?
I've included the code for your review:
<form action="contactform.php" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="email" aria-describedby="emailHelp" placeholder="Enter your email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="nameofclient">Name</label>
<input type="text" class="form-control" id="nameofclient" name="name" placeholder="Enter name" required>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Questions/Concerns</label>
<textarea class="form-control" id="exampleFormControlTextarea1" name="comment" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
window.onload = function () {
var form = document.getElementById('theForm');
form.button.onclick = function (){
for(var i=0; i < form.elements.length; i++){
if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
alert('There are some required fields!');
return false;
}
}
form.submit();
};
};
<form action="contactform.php" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="email" aria-describedby="emailHelp" placeholder="Enter your email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="nameofclient">Name</label>
<input type="text" class="form-control" id="nameofclient" name="name" placeholder="Enter name" required>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Questions/Concerns</label>
<textarea class="form-control" id="exampleFormControlTextarea1" name="comment" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
the above code might help
When testing my web form that was built using HTML, CSS, Bootstrap, PHP and jQuery, the first thing I do is click the Submit button. When I do this, the text-danger errors display below the Input and Text Area fields as expected since the fields are empty. If I add a value in the Input field "Name" and click the Submit button again, the text-danger field continues to display below the Name field. The same goes when I try the same thing for the Email and Security Check fields.
When I add a value in the Message Text Area field, the text-danger error for the message field disappears along with the other errors. The message field needs to have a value in order for the errors for all of the fields to disappear.
How should I set up my jQuery so that once a value is added to a field and I click the Submit button to test, the text-danger error for that specific field no longer displays?
HTML and jQuery Code
<div class="container">
<div class="row">
<form method="post" action="index.php" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" id="name" name="name" placeholder="Enter your name" class="form-control" value="<?php echo $name;?>">
<p class="text-danger">You need to enter a name value</p>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" id="email" name="email" placeholder="your#email.com" class="form-control" value="<?php echo $email;?>">
<p class="text-danger">You need to enter a valid email</p>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea id="message" name="message" rows="4" class="form-control"><?php echo $message;?></textarea>
<p class="text-danger">You need to enter a message</p>
</div>
</div>
<div class="form-group">
<label for="secCheck" class="col-sm-2 control-label">
<?php echo $_SESSION["a"] .'+'.$_SESSION["b"];?>
</label>
<div class="col-sm-10">
<input type="text" id="secCheck" name="secCheck" class="form-control">
<p class="text-danger">Answer the question above</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input type="submit" value="Send" class="btn btn-primary btn-large btn-block" id="submit" name="submit">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('form').on('submit',function(){
$(".text-danger").hide();
var holderValue = false;
$(this).find('input[type!="hidden"]').each(function(){
if(!$(this).val()){holderValue=true; $(this).parent().find(".text-danger").show();}
})
if(!$("#message").val()){holderValue=true; $(this).parent().find(".text-danger").show();};
if(holderValue){return false;}
// event.preventDefault();
// console.log('form submitted');
})
$("input").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
$("textarea").on("change paste keyup", function() {
if($(this).val()){
$(this).parent().find(".text-danger").hide();
}
});
</script>
Bootstrap Custom Form
There are a couple of key Bootstrap attributes and classes needed for custom validation:
HTML
<form ... novalidate>
All <input ... required>
Remove all <p class='danger-text'>...
Replace the previous with <aside class='invalid-feedback'>
Also the tags have been changed from <div> to a more semantic tag, but it isn't required. The layout has been changed as well -- originally the layout had only one .row which now has several .form-rows (not sure if that was intentional or not, but it looks better when using .form-control).
jQuery
On each .form-control ...
$('.form-control').each(function() {...
...if the current .form-control is invalid...
if ($(this).is(':invalid')) {...
...stop the from submitting and show the invalid message...
e.preventDefault();
$(this).next('.invalid-feedback').show();...
...otherwise hide the invalid message if need be.
} else {
$(this).next('.invalid-feedback').hide();
}
Demo
$('.invalid-feedback').hide();
$('#main').on('submit', function(e) {
$('.form-control').each(function() {
if ($(this).is(':invalid')) {
e.preventDefault();
$(this).next('.invalid-feedback').show();
} else {
$(this).next('.invalid-feedback').hide();
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class="container">
<form id='main' class="form-horizontal" method="post" action="index.php" novalidate>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="name" class="control-label">
Name
</label>
<input id="name" name="name" class="form-control" type="text" placeholder="Enter your name" required>
<aside class="invalid-feedback">
You need to enter your name.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="email" class="control-label">
Email
</label>
<input id="email" name="email" class="form-control" type="email" placeholder="your#email.com" required>
<aside class="invalid-feedback">
You need to enter your email.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="message" class="control-label">
Message
</label>
<textarea id="message" name="message" class="form-control" rows="4" required></textarea>
<aside class="invalid-feedback">
You need to enter a message.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10">
<label for="secCheck" class="control-label">
</label>
<input id="secCheck" name="secCheck" class="form-control" type="text" required>
<aside class="invalid-feedback">
Answer the security question above.
</aside>
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" class="btn btn-primary btn-large btn-block" type="submit" value="Send">
</fieldset>
</section>
<section class="form-row">
<fieldset class="form-group col-sm-10 col-sm-offset-2">
<output id='result'></output>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
This is some code for a 'Signup' html page; i'm having trouble getting it to check if the two passwords match though. If they don't match, I need a pop up box to display "try again"; if they do math, the page can continue as normal (The sumbit button goes to the home page of my website).
Thanks!!! I've written a javascript function near the bottom....
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
<script>
function checkPassword{
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
var n = var1.localeCompare(var2)
if(n == 0){
return true;
alert("Passwords do not match, please try again!");
}
return false;
}
</script>
</div>
</div>
</form>
Changed your code slightly:
<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
</div>
</div>
</form>
<script>
function checkPassword(){
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
if(var1.value != var2.value){
alert("Passwords do not match, please try again!");
return false;
}
else{
return true;
}
}
</script>
Please note your form tag has onsubmit event, which calls your javascript function(not submit button) this way you stop form from being submited if passwords don't match. Also in your javascript function notice how I display alert before returning false and modified code to compare element values not elements. This code is tested and works.
delete onclick="checkPassword()" from submit tag
and in form tag add
onsubmit="return checkPassword()"
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Also n===0 means, it matches and alert after return statement won't work.
You are comparing the elements, not the values. Get the values from the elements:
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Return false if you want to stop the submission, and show the message before calling return. The localeCompare method returns a non-zero value if the strings are different:
if(n != 0){
alert("Passwords do not match, please try again!");
return false;
}
return true;
Instead of using the click event on the button, use the submit event on the form:
<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">
First switch lines with return and alert.
var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;
if( pw1 !== pw2 )
{
alert("Passwords do not match, please try again!");
return true;
}
I took the value out of the input elements and compare them with !==. That means, the type of both variables must be equal and the text must also be not equal.