I Have a requirement where i have 3 input fields namely
1.old password
2.new password
3.confirm password.
For which i need to apply rules as follows.
1.Old and new passwords should not match.
2.No field should be empty.
3.New password and confirm password inputs should be same.
If all these validations passes then only form should be submitted.
Here is the Html file for which i need to apply js
<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>
thank you
Please replace with your ids..
function checkForm()
{
var oldP=document.getElementById("oldP").value;
var newP=document.getElementById("newP").value;
var confirmP =document.getElementById("confirmP").value;
if(oldP!=""&&newP!=""&&confirmP!="")
{
if(oldP!=newP)
{
if(newP==confirmP)
{
return true;
}
else
{
alert("Confirm password is not same as you new password.");
return false;
}
}
else
{
alert(" This Is Your Old Password,Please Provide A New Password");
return false;
}
}
else
{
alert("All Fields Are Required");
return false;
}
}
An in thml you need to add
<form onsubmit="return checkForm();" ----- >
For reset you can create a function somting like this
function resetForm()
{
var oldP=document.getElementById("oldP").value="";
var newP=document.getElementById("newP").value="";
var confirmP =document.getElementById("confirmP").value="";
}
and call when you want form reset.
firstly you should catch the click avtion on submit button and check the fields
$([name=Submit]).on('click', function(e) {
if (($('#oldPassword').val() == "")||($('#newPassword').val() == "")||($('#confirmPassword').val() == "")) {//check 2
e.preventDefault();
}
if ($('#oldPassword').val() == $('#newPassword').val()) {//check 1
e.preventDefault();
}
if ($('#newPassword').val() != $('#confirmPassword').val()) {//check 3
e.preventDefault();
}
}
P.S. i wrote code in this style because i want to show all steps. shurely you can combine 'if's in one to clear your code. as example u can combine check 1 and check 3 and put it in else block of check 2
create a function and call on onClick of button
<button type="button" name="Submit" value="Save" class="btn btn-danger" onclick="Function();"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" "></i> Save</button>
Your javascript Function will be Like this
<script>
function Function() {
var oldpasswprd = document.getElementById('oldPassword').value;
var newpassword = document.getElementById('newPassword').value;
var confirmpassword = document.getElementById('confirmPassword').value;
if (oldPassword == "" || newpassword == "" || confirmpassword == "") {
alert('Please fill all the details');
}
else if (oldpasswprd == newpassword) {
alert("Old password and New Password cannot be same");
}
else if (newpassword != confirmpassword) {
alert("password mismatch");
}
}
</script>
<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>
Related
Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored
I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.
https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.
This is the code to make the call:
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
console.log(data);
}
});
});
My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.
It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.
Move your form tag under your first container:
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
End tag
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</form>
</div>
Full example of cleaned up code running:
function test() {
var billName = document.getElementById('bill_name');
var shipName = document.getElementById('ship_name');
var billLine1 = document.getElementById('bill_line_1');
var shipLine1 = document.getElementById('ship_line_1');
var billLine2 = document.getElementById('bill_line_2');
var shipLine2 = document.getElementById('ship_line_2');
var billLine3 = document.getElementById('bill_line_3');
var shipLine3 = document.getElementById('ship_line_3');
var billLine4 = document.getElementById('bill_line_4');
var shipLine4 = document.getElementById('ship_line_4');
var billCounty = document.getElementById('bill_county');
var shipCounty = document.getElementById('ship_county');
var billPostcode = document.getElementById('bill_post');
var shipPostcode = document.getElementById('ship_post');
var billTele = document.getElementById('bill_telephone');
var shipTele = document.getElementById('ship_telephone');
var billEmail = document.getElementById('bill_email');
var shipEmail = document.getElementById('ship_email');
shipName.value = billName.value;
shipLine1.value = billLine1.value;
shipLine2.value = billLine2.value;
shipLine3.value = billLine3.value;
shipLine4.value = billLine4.value;
shipCounty.value = billCounty.value;
shipPostcode.value = billPostcode.value;
shipTele.value = billTele.value;
shipEmail.value = billEmail.value;
}
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
var test = form.serialize();
alert(test);
});
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> ';
cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> ';
cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>';
cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="bill_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Name</div>
</div>
<input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 1</div>
</div>
<input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 2</div>
</div>
<input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 3</div>
</div>
<input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 4</div>
</div>
<input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="bill_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing County</div>
</div>
<input id="bill_county" name="bill_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Postcode</div>
</div>
<input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Telephone Number</div>
</div>
<input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Email Address</div>
</div>
<input id="bill_email" name="bill_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="ship_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Name</div>
</div>
<input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 1</div>
</div>
<input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 2</div>
</div>
<input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 3</div>
</div>
<input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 4</div>
</div>
<input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="ship_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping County</div>
</div>
<input id="ship_county" name="ship_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Postcode</div>
</div>
<input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Telephone Number</div>
</div>
<input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Email Address</div>
</div>
<input id="ship_email" name="ship_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
<button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
</div>
</div>
<br>
<div class="container">
<h2>Extra Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group row">
<label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
<div class="col-7">
<div class="input-group">
<input id="ship_method" name="ship_method" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-anchor"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
<div class="col-7">
<div class="input-group">
<input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
</div>
<span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
</div>
</div>
<div class="form-group row">
<label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
<div class="col-7">
<div class="input-group">
<input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<h2>Item Information</h2>
<div class="row">
<div class="col-12">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>SKU</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="sku" class="form-control" />
</td>
<td>
<input type="number" name="quantity" class="form-control" />
</td>
<td>
<input type="number" name="price" class="form-control" />
</td>
<td>
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Is it possible to submit a form that have a submit button (by pressing enter)
I have two text fields by clicking the login button I am able to process the outcome but I am unable to do it by hitting enter.
Here is the HTML code(updated with full code)
this is signin.component.html
<div class="modal-content" style="padding: 10px;" id="login" *ngIf="show">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
</div>
</form>
<div class = "error"> {{ errMsg }} </div>
<button class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<hr>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password? Reset
</p>
<p class="forgotPwd">
New User? Register now
</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="showSignUp">
<app-sign-up></app-sign-up>
</div>
<div *ngIf="showForgotPassword">
<app-forgot-password></app-forgot-password>
</div>
this signin.component.ts file
import { Component, OnInit } from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import { Router } from '#angular/router';
import { AuthService } from '../services/auth/auth.service';
#Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
username:string;
password:string;
show = true;
showSignUp = false;
showForgotPassword = false;
errMsg = "";
constructor(
private authService: AuthService,
public activeModal: NgbActiveModal,
) { }
ngOnInit() {
this.authService.getEmitter().subscribe(res => {
if(res){
this.activeModal.dismiss('success');
}
else{
this.username = "";
this.password = "";
this.errMsg = "Invalid Username/Password";
}
})
}
signInGoogle(){
this.authService.loginWithGoogle();
}
signInFacebook(){
this.authService.loginWithFacebook();
}
signInLinkedin(){
this.authService.loginWithLinkedin();
}
logOut(){
this.authService.logOut();
}
login(){
this.authService.login(this.username,this.password);
}
reset(){
this.show = false;
this.showSignUp = false;
this.showForgotPassword = true;
}
signup(){
this.show = false;
this.showSignUp = true;
this.showForgotPassword = false;
}
}
Use (keyup.enter)="focusableSubmit.click()" to input Password and call #focusableSubmit to Button login, this would perform the task and same for button as shown in code below.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required (keyup.enter)="focusableSubmit.click()">
</div>
</form>
<div class = "error"> {{ errMsg }} </div>
<button #focusableSubmit class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<hr>
</div>
</div>
Your button should be inside the form but you have closed it inside the two input fields.
Update your code like this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
</div>
<div class = "error"> {{ errMsg }} </div>
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
</form>
<hr>
</div>
</div>
Yes you can.
Usually, you need to put your code in action="". But this isn't old HTML, this is Angular, and it works with Javascript.
So, in order to do that, you need to add the novalidate tag, and tell the form what to do when you validate it.
You also need to declare a submit input instead of your button.
This would look like
<form class="loginForm" novalidate (ngSubmit)="login()" autocomplete="off">
<input type="submit" value="Login" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()"/>
Yes it is possible and quite easy!
First you have to replace
(button)="button()"
with
(ngSubmit)="login()"
and remove the click handler from the button and change the type to submit.
Both lines changed look like this:
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" (ngSubmit)="login()" method="POST">
and:
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid">Login</button
Dont forget that this way, that button() does not get called.
Angular documentation is really helpful on most of the generel topics, maybe you should take a look there.
Additionally you should consider reading up on some basic information about forms. I personally suggest: forms on MDN and buttons on MDN.
Here's a strapped version of my form for sending comments.
As you see, I prevented the ENTER event on textarea and that will cause pressing ENTER while focused on textarea to not make a new line (but you can use SHIFT + ENTER).
Pressing enter sends a form.
<form #addCommentForm="ngForm" (keydown.enter)="addComment(addCommentForm.value)">
<textarea (keydown.enter)="$event.preventDefault()" type="text" placeholder="Leave a comment..." name="description" #description="ngModel" [(ngModel)]="comment.description"></textarea>
</form>
Give a try to
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
I have a two pages sign-in and sign-up in my navbar(header) angular2 project. In my sign-up page I have a link which should have to redirect to sign-in page when we clicked it. I am unable to process it.Can anyone guide me how to do it. thanks in advance
Here are the both codes i have tried with router aswell.
sign-in.component.html
<div class="modal-content" style="padding: 10px;" id="login">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="text" class="form-control" name="username" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="btn btn-lg btn-info btn-block btnlog" type="submit">Login</button>
<hr>
</form>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password?
</p>
</div>
</div>
</div>
</div>
</div>
sign-up.component.html
<div class="modal-content" style="padding: 20px;">
<div class="modal-body text-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-primary">
<div class="panel-body">
<form method="POST" action="#" role="form">
<div class="form-group">
<h2>Create account</h2>
<hr>
</div>
<div class="form-group">
<label class="control-label" for="signupName">Your name</label>
<input id="signupName" type="text" maxlength="50" class="form-control" placeholder="Your name">
</div>
<div class="form-group">
<label class="control-label" for="signupEmail">Email</label>
<input id="signupEmail" type="email" maxlength="50" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signupPassword">Password</label>
<input id="signupPassword" type="password" minlength="6" maxlength="25" class="form-control" length="40" placeholder="Password">
</div>
<div class="form-group">
<label class="control-label" for="signupPasswordagain">Confirm Password</label>
<input id="signupPasswordagain" type="password" minlength="6" maxlength="25" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create your account</button>
</div>
<hr>
<p>Already have an account? Sign in</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
PS:- I should only do this in angular r javascriprt r bootstrap way thanks in advance
Edit :- Is there anyone can do this?
I solved my issue by adding in my signup component
<div *ngIf="hide"> //at the top
<div class="modal-content" id="register" style="padding: 20px;">
<div *ngIf="show"> //at the bottom
<app-sign-in></app-sign-in>
</div>
adding a click function to the button
<p>Already have an account? <button type="button" (click)="signin()">Sign In</button></p>
in the ts file making show = true and hide= false when required like below
export class SignUpComponent implements OnInit {
show = false;
hide = true;
signin(){
this.hide=false;
this.show=true;
}
}
in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.
Form is:
i need to validate above form fields. if it is success then i need to display the modal and validate those fields.
Modal is:
My Code is:
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
</div>
<div class="modal-body">
<div class="main-login pop-up-form">
<form class="" method="post" action="#"><br>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Address"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Phone No"/>
</div>
</div>
</div>
<div class="form-group ">
CLICK For Enquiry
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
Form code is showed below:
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="date" class="form-control" name="udate" id="udate" placeholder="ghf" style="height: 39px !important;" />
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<select name="ftime" id="ftime">
<option value="">---Select---</option>
<option value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<select id="ftype" name="ftype" onchange="validate()">
<option value="">--select--</option>
<option value="hai">V</option>
<option value="hai">NV</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="amount" id="amount" placeholder="hai" readonly="readonly" />
</div>
</div>
</div>
<div class="form-group ">
<a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
validate2()">Submit</a>
</div>
</form>
i was not able to validate both the form and modal. please help me on this..
thanks in advance
You can write a simple validation method
An example could be....
function checkValidation()
{
var isValid = true;
if($("#date").val() == null){
isValid = false;
}
if($("#person").val() == null){
isValid = false;
}
if($("#mail").val() == null){
isValid = false;
}
return isValid;
}
if(checkValidation())
$("#modalDialog").show();
else
alert("Form is not valid");
Try this code:
First attach an click listener to your form submit button and validate your form when button is clicked and if validation is successful then you can show your modal.
$(document).on('click', '#submit', function(e){
e.preventDefault();
var validated = validateform();
if(validated){
$('#modal').modal('show');
}
});
Write your validation logic inside this function and return true if validation passes tests.
function validateform(){
// logic for form validation
// return true if validated successfully
}
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>