In the end of my page, before closing body, I have this code:
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
for (var i = 0, form; form = document.forms[i]; ++i)
form.reset();
}
But it doesn't work... It executed, but noting happens... Form still is filled, but when i run same code from firebug it works fine! I also tried wrap code with jQuery(document).ready() function but still no luck... It works only from firebug console...
UPDATE:
<form class="form-horizontal" method="POST" action="{{ route('store_user') }}" autocomplete="off">
{{ csrf_field() }}
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Enter Email" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" autocomplete="off" name="password" placeholder="Enter Password" style="margin-bottom:5px">
<input type="password" class="form-control" autocomplete="off" name="password_confirmation" placeholder="Repeat Password">
</div>
</div>
</form>
If your intention is to prevent the form being auto-completed in Firefox (an annoying feature) then simply mark the form as autocomplete "off"
<form method="post" action="/form" autocomplete="off">
Also check out this document:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
particularly the section where it says if the autocomplete still persists to try:
autocomplete="nope"
Since this random value is not a valid one, the browser will give up.
Related
So I'm new to JS, and I'm trying to make this form prevent submission if password does not match the confirm password field. However, when I enter in 2 different passwords, I don't get an alert like I've coded in the script below. Any thoughts? For reference, the form was built w/ bootstrap.
<form class="form-signin">
<div class="form-label-group">
<input type="text" id="fullName" class="form-control" placeholder="Username" required autofocus>
<label for="fullName">Full name</label>
</div>
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
<label for="inputEmail">Work email</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required>
<label for="inputConfirmPassword">Confirm password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" id ="register-btn" type="submit">Register</button>
<hr class="my-4">
<div class="registration-login">
<p class="already-have__account">Already have an account?</p> Login
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="registration__section">
<h2>Innovative supply chain teams use Rumi to manage scalable and sustainable packaging.
</h2>
</div>
<script>
var form = document.getElementById('form-signin');
form.onsubmit = function() {
if (inputPassword.value !== inputConfirmPassword.value) {
alert("Your passwords don't match");
return false;
}
else {
return true;
}
}
Just a minor mistake.
You are using get getElementById.
var form = document.getElementById('form-signin');
There is no id with 'form-signin',
<form class="form-signin">
Rename the class to id.
<form id="form-signin">
Check out this (JSFiddle). It's working here.
I have this form and I tried to make a "onsubmit" that when I click submit it checks if the "email" is = to "cemail" and if username was taken before or not i got this so far
<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
Javascript code:
<script>
function ValidationEvent() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var cemail = document.getElementById("cemail").value;
// Conditions
if (email.match != cemail.match) {
alert("Your email doesn't match!");
}
if(mysqli_num_rows($result) != 0)
{
alert("Username already taken!");
}
else {
alert("Thank you");
}
}
</script>
Am I approaching the function in the wrong way is there another easier way and is it okay i put an sql statement in my java script ?
First, don't use inline HTML event handling attributes (like "onsubmit") as they create "spaghetti code", anonymous global event handling wrapper functions and don't conform to the modern W3C DOM Event handling standard.
Second, your .php results have to be gotten from somewhere. You'll need to put a call into that file for its results before you can use them.
Next, you were using the .match() string method incorrectly to compare the emails against each other. All you really need to do is compare the values entered into the email fields (it's also a good idea to call .trim() on form values to strip out any leading or trailing spaces that might have been inadvertently added).
Once you restructure your code to use standards, the JavaScript will change as follows (FYI: This won't work in the Stack Overflow snippet environment because form submissions are blocked, so you can see a working version here):
// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you will need:
var frm = document.getElementById("frm");
// Don't set variables to the values of DOM elements,
// set them to the DOM elements themselves so you can
// go back and get whatever properties you like without
// having to scan the DOM for them again
var email = document.getElementById("email");
var username = document.getElementById("username");
var cemail = document.getElementById("cemail");
// Set up a submit event handler for the form
frm.addEventListener("submit", validationEvent);
// All DOM event handling funcitons receive an argument
// that references the event they are responding to.
// We need that reference if we want to cancel the event
function validationEvent(evt) {
// Conditions
if (email.value.trim() !== cemail.value.trim()) {
alert("Your email doesn't match!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
return;
}
// You need to have already gotten the "mysqli_num_rows($result)" value
// from your .php file and saved it to a variable that you can then check
// here against "!=0"
if(mysqli_num_rows($result) != 0) {
alert("Username already taken!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
} else {
alert("Thank you");
}
}
});
<form class="form-horizontal" id="frm" action="#" method="post">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
For checking the emails with email & cemail use
email.localeCompare(cemail)
This will check the string comparison betwwen two emails
And for mysqli_num_rows , is not defined any where in javascript, so we will get the undefined error in console, so need to write a different funnction with that name.
First give a name and an action to your form
<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
....
</form>
Then put this script at the bottom
<script>
$('#myForm').on("sumbit", function(){
// cancel the original sending
event.preventDefault();
$.ajax({
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
})
.done: function(data) // is called wehn the call was okay
{
if( data.substr(0, 5) == "Error"){
alert(data); // sent the sting of the "error message" begining with "Error"
}else{
top.location.href = data; // sent the sting of the "success page" when all was okay and data are saved in the database
}
}
.fail(function() {
alert( "Error: Getting data from Server" );
})
});
</script>
in the php file check the values an return an error if something went wrong.
<?php
if(!isset($_POST['email']) || !isset($_POST['cemail'])){
die("Error: Please fill out both email fields.");
if($_POST['email'] != $_POST['cemail'] ){
die("Error: The Email adresses do not match.");
}
here do what you want to do with the data.
when finish just send the new url
echo "success.html";
}
?>
I have the following code and it works fine to check if the input field "inputURL" has a valid URL, if it has the anchor link a.btn shows fine but I also only want it to show if both have been filled in. How can I add to the ng-show in the anchor to do this?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" >
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" >
</div>
<div class="col-xs-2">
Post
</div>
</form>
You can check if both have been filled with the model like this:
ng-show="myForm.inputURL.$valid && mvName && nvUrl"
or with the view value of the input
ng-show="myForm.inputURL.$valid && myForm.inputURL.$viewValue && myForm.urlName.$viewValue"
You can use the required HTML5 special attribute to check if the input is not empy.
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" name="mvName id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
However, to clean the view a little bit, I would suggest using a controller. Expose a function which returns true or false if the form is valid. And simply use ng-show="isValid()".
I don't know what's wrong in this. Validation not working here.
Form submitted without validation.
function validate()
{
if( document.myForm.username.value == "" )
{
alert( "Please provide your user name!" );
document.myForm.fname.focus() ;
return false;
}
if( document.myForm.email.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.email.focus() ;
return false;
}
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.myform.email.value))
{
alert("You have entered an invalid email address!")
return false;
}
}
return false;
}
<form class="form-horizontal" method="post" id="myForm" action=" " name="myForm" onsubmit="return validate()">
<div class="form-group">
<p class="text-center">Register Information</p>
<br>
</div>
<div class="form-group">
<label for="username" class="control-label col-xs-2">UserName</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="name" name="username"
placeholder="UserName">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-xs-2">Email Address</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="email" id="email"
placeholder="abc#domain.com" />
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-xs-2">Password</label>
<div class="col-xs-2">
<input type="password" class="form-control" name="password" id="password"
placeholder="##########" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" name="submit" class="btn btn-primary">submit</button>
</div>
</div>
</form>
I don't know whats wrong in this.Please help me to fix it.
Try using type="email" form email id field validation and 'required' directive for required fields.
<input type="email" class="form-control" name="email" id="email" placeholder="abc#domain.com" required/>
If you tried to do validation using HTML5 features you have to add attrributes like required or pattern to your inputs.
You trigger validate() on submit bu there is no javascript code in the markup you pasted.
Start with this article.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
It describes native browser support for valdiation and later suggests some libraries and examples of custom code.
In validate function the closing bracket just before the last "return false" statement is unnecessary.
I have a little problem.... see here : http://prntscr.com/5anqx8 : here you can see what's wrong, there are 2 default characters in those inputs... this happends on multiple pages and there is nothing in the code what could be the problem. I use Firefox but have Chrome as well. On Chrome is doesn't show these characters which is kinda weird. How do I get rid of these Characters?? I've tried clearing all history cache and stuff, the whole list. I restarted Firefox.... nothing works. I'm not sure if this is really a programming question but you guys are really smart so... I'm asking you :p
Thanks a lot,
Mike
CODE :
<!-- Right Content -->
<div class="col-md-6">
<div class="panel-box">
<div class="titles">
<h4>Registratie Formulier</h4>
</div>
<!-- Form Contact -->
<form class="form-theme">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Uw gebruikersnaam</label>
<input type="text" required="required" value="" maxlength="100" class="form-control" name="Name" id="name">
</div>
<div class="col-md-6">
<label>Uw email</label>
<input type="email" required="required" value="" maxlength="100" class="form-control" name="Email" id="email">
</div>
<div class="col-md-6">
<label>Uw wachtwoord</label>
<input type="password" required="required" value="" maxlength="100" class="form-control" name="Password" id="password">
</div>
<div class="col-md-6">
<label>Herhaal uw wachtwoord</label>
<input type="password" required="required" maxlength="100" class="form-control" name="Password2" id="password2">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Registreer" class="btn btn-lg btn-primary">
</div>
</div>
</form>
<!-- End Form Contact -->
<div class="result"></div>
</div>
</div>
<!-- End Right Content -->
Some browsers can save form data like passwords, names and adresses.
When getting errors like this, remember to test in a private window/session to rule this out.