I'm develoing Windows 8 metro style application with Html 5 and Javascript
My question is simple, how can write simple form with validation ?
<form id="loginForm">
E-Mail:
<input id="login-email" type="email" name="Username" oninvalid="this.setCustomValidity('Enter email pls')"
maxlength="40" required pattern="^.{2,}#.{2,}$"/>
Password:
<input id="login-password" type="password" name="Password" maxlength="25" required pattern=".{6,10}"/>
<button name="login" type="submit" class="go-login" id="btnlogin" value="LOGIN">LOGIN</button></form>
This is my html 5 form. But the problem is metro style event listener...
document.getElementById("btnlogin").addEventListener('click', loginClick);
When I click the submit button, the EventListener's "loginClick" function launches without checking html 5 form input elements valid or not.
Ran into the same issue while working with HTML5/JS Windows Store Application (WSA). The expectation is that the user is notified on the client and that the code in the 'Submit' does not run. This is what we see on a web-based HTML5 application running in the browser. However, the WSA app runs the submit code when the button is clicked regardless of the validation status. In my application, I included a check of the loginForm.checkValidity() property. This is true when all validation is correct.
if (loginForm.checkValidity())
{
//...submit logic...
}
I agree, this check is an extra step given our expectations from the web world. This is still version 1 of the WSA platform and I expect this functionality will evolve into the product in a future update/release.
According to w3schools, you have to call onsubmit="return function()" in the form tag.
This way it should not proceed to submit without going through the validation.
grabbed from W3schools:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
and the belonging javascript:
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
Related
I have a file index.php with a log in form comprising a field for the email address, a field for the password, a box to check, and two submit buttons:
the first button ("log_in") is for trying to log in with the current combination email/password. This button triggers a script ("check_box()") which verifies that the box has been checked.
the second button is for generating a new password for the current email address. It also triggers a script ("confirmation()") which asks the user to confirm before executing the action.
I am trying to submit the form with javascript, and to keep track of which button has been submitted in order to execute the correct action. Please see the code below.
<form id="form" name="form" method="post" action="index.php">
<input type="text" name="email" id="email" placeholder="Email address" />
<input type="password" name="password" id="password" placeholder="Password" />
<input type="radio" id="box" name="box"><label for="box">Please check this box if you want to log in.</label>
<input type="button" id="log_in" name="log_in" value="Log in" onclick="return check_box();"/>
<input type="button" id="change_password" name="change_password" value="Password forgotten?" onclick="return confirmation();"/>
</form>
function confirmation(){
if (!confirm("A new password will be generated and sent to your email address. Please make sure that your email address is written correctly, and click on Confirm to proceed.")) {
return FALSE;
}
else{
var form = document.getElementById('form');
form.submit();
}
}
function check_box(){
var success = document.querySelector("input[name=box]:checked");
if(!success){
alert("Please check the box.");
}
else{
var form = document.getElementById('form');
form.submit();
}
}
My problem is to retrieve the values of the buttons when the form is submitted. I tried
if(isset($_POST['log_in']))
to detect whether the user has been trying to log in, and
if(isset($_POST['change_password']))
to detect whether the user wants to change password. But these tests always return FALSE. Where is the mistake?
Thank you in advance.
I am actually developing a Cordova application with AngularJS (1.5.11). I am facing a really strange bug with iOS which I don't have with Android (same code).
I removed all unneeded information from the form to reproduce the bug (classes, directives, extra divs...) and the bug is still there :(
Here is the form:
<form method="post" ng-submit="$ctrl.login()">
<input type="email" name="username" value="" required ng-model="$ctrl.username">
<input type="password" name="password" value="" required ng-model="$ctrl.password">
<button type="submit">Submit</button>
</form>
My form is submitting even if it is invalid. It is a basic login form with two fields (login, password) and a button.
Just for information, every form in my app is affected by this bug.
Did I miss something?
Thanks for your help :)
You have 3 options
1.- Disable the submit button if the form is invalid:
<form name="needNameForm" method="post" ng-submit="$ctrl.login()">
...
<button type="submit" ng-disabled="needNameForm.$invalid">Submit</button>
</form>
2.- Ignore the submit if the form is invalid:
<form name="needNameForm" method="post"
ng-submit="needNameForm.$valid && $ctrl.login()">
...
</form>
3.- Check validity in your submit method:
<form name="needNameForm" method="post"
ng-submit="$ctrl.login(needNameForm)">
...
</form>
<!-- for testing purposes you can use this line below -->
<pre>{{needNameForm | json}}</pre>
In your controller:
angular.controller('name', function(){
var vm = this;
vm.login = function(formController){
if(formController.$valid){
doStuff();
}
}
}
with this 3rd option you will have more control if you want to validate each input in your form, the formController object will have all info for each input, and also you will require to add a name to the inputs so you can get full info about them, here is all the info about it: https://docs.angularjs.org/api/ng/type/form.FormController
I have the following code:
<form>
<input type="email" id="login_email" required>
<input type="submit" value="Sign in" ng-click="signIn()">
</form>
The problem with above code is that signIn() method gets called even if there is an email validation error from HTML5 side. In general how to ensure that signIn() method gets called only when all the input validation of the form are successful?
Use $pristine to find out if the form is empty, and $invalid to find out if the form is populated but has invalid values (maybe an incorrect email, for example).
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
So now your submit button will be disabled (not clickable) until your form is valid.
EDIT
In order to validate only with HTML5 validation, add a name attribute to your form and you can access the validity of it during submission:
<form name="myForm">...</form>
$scope.signIn = function(){
if ($scope.myForm.$valid){
// do sign in logic here
}
}
Maybe even inline the logic on your submit button (if it works):
<input type="submit" value="Sign in" ng-click="myForm.$valid && signIn()">
So signIn would only be called if the first part was true.
EDIT 2
Based on the information found on the AngularJS docs here, can you try the following as well?:
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="signIn()">Save</button>
</form>
$scope.signIn = function () {
if ($scope.myForm.email.$error.required) {
// ...
}
};
We are now following the $scope.myForm.email.$error.required syntax approach.
Try logging $scope.myForm or $scope.myForm.email and see what you get as you modify the value.
I've got a simple login form with the absolute basics in place for front-end validation. It just checks that the fields aren't blank and that the email is in the most basic correct format. When the form is invalid I prevent the submit behavior.
When I enter something into both fields so they aren't blank, but the email is still invalid, the form is not submitted, yet I am still prompted by browsers to save my credentials.
How can I prevent this from happening when the form is invalid and hasn't yet been submitted? I still want this feature to be offered to users, but only when the form is actually submitted.
Here's the basics of how I've set this up:
HTML:
<form method="post" action="" onsubmit="return validateForm()" novalidate>
<input type="text" id="email" required autofocus>
<input type="password" id="password" required>
</form>
JS:
function validateForm() {
var isValid = true;
//validation logic goes here...
return isValid;
}
Here's a working demo: https://codepen.io/chrismbarr/pen/awmVyq
Enter an invalid email and something in the password field to trigger this.
Just for learning purposes, I want to make an insecure HTML5 "login page" which handles everything on the client side.
<div class="login">
<input type="text" placeholder="username" name="username"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" onclick="check(this.form)" value="Login">
</div>
<script>
function check(form) {
if(login.username.value == "guest" && login.password.value == "pwrd") {
window.open('home.html')
}
else {
alert("Error Password or Username")
}
}
</script>
You cannot use JavaScript to make a login page...The user can modify your script and bypass the login script.
Also, there is no such thing as a simple login system. You have to use databases and verify EVERY page to make sure the user is allowed and is logged in.
Validation should be done on the client side only, validation like required, alphanumeric, only numbers etc. Checking the username and password should be done on the server side, using ajax and simple PHP query to check username and password from the table.
If you are looking for front end html only then html5 provides nice validation already like for required and email and numbers only.
eg: <input type="email" name="usermail" placeholder="yourname#email.com" required>
<input type="password" name="password" placeholder="password" required>
Here is a nice tutorial for creating a login form.
http://www.hongkiat.com/blog/html5-loginpage/
You need to use php :
1.html Form :
<form action="your_page.php" method="POST">
<input type="text" placeholder="username" name="username"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" name="submit" value="Connect" />
</form>
2.php Work now :
<?php
if(isset($_POST['submit'])){ //when user click connect
if(!empty($_POST['username']) && !empty($_POST['password'])){
if ($_POST['username']=="guest" && $_POST['password']=="pwrd"){
header("Location:home.php");
}else{
echo"check the password and username";
}
}else{
echo"fill all the inputs";
}
}