At Click "Login", Nothing, Don't Procces The Form, Can Help me?
Code:
<form method="POST" action="" id="login">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="Username" name="Username" aria-describedby="basic-addon1" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-key" aria-hidden="true"></i></span>
<input type="password" class="form-control" placeholder="Password" name="Password" aria-describedby="basic-addon2" required>
</div>
<div class="text-center">
<input type="submit" form="login" class="btn btn-success btn-submit" value="Login">
</div>
</form>
what is Wrong? Can Help Me?
uPDATE Code: https://hastebin.com/wemerigodu.scala
When you are making the form, you have typed:
<form method="POST" action="" id="login>"
To make the form working type the file name that contains the code to login for example:
<form method="POST" action="login_verify.php" id="login">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="Username" name="Username" aria-describedby="basic-addon1" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-key" aria-hidden="true"></i></span>
<input type="password" class="form-control" placeholder="Password" name="Password" aria-describedby="basic-addon2" required>
</div>
<div class="text-center">
<input type="submit" form="login" class="btn btn-success btn-submit" value="Login">
</div>
</form>
A button located outside a form (but still a part of the form).
And you have a page in action attribute that receives the submitted field's value.
<form action="Your_Handle_Page" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
you haven't specify action on form submit you need to write redirect url in form action element as below.
<form method="POST" action="xyz.html" id="login">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="Username" name="Username" aria-describedby="basic-addon1" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-key" aria-hidden="true"></i></span>
<input type="password" class="form-control" placeholder="Password" name="Password" aria-describedby="basic-addon2" required>
</div>
<div class="text-center">
<input type="submit" form="login" class="btn btn-success btn-submit" value="Login">
</div>
</form>
Related
My required attribute is not working when I am clicking on submit button in login component.
Here is my login form code -
<form onSubmit={this.onSubmit} noValidate>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-envelope"></i>
</span>
</div>
<input
type="email"
className="form-control"
name="email"
placeholder="Please enter your email"
value={this.state.email}
onChange={this.onChange}
required="required"
/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input
type="password"
className="form-control"
name="password"
placeholder="Please enter password"
value={this.state.password}
onChange={this.onChange}
required=""
/>
</div>
</div>
<br />
<button type="submit" className="btn btn-primary btn-block">
{loading ? <LoadingSpinner /> : "LOGIN"}
</button>
</form>
I also checked with removing novalidate attribute in form but still It's not working.
remove the noValidate from the form attribute in the first line and you are good to go
it worked for me with your code
In Angularjs form validation of Email-Id and Password is not working. Please check below code snippet.
<div class="field_w3ls">
<div class="field-group">
<input type="text" name="email" placeholder="Email" id="email" class="form-control" ng-model="email" ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/" required />
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span>
</div>
</div>
<div class="field_w3ls">
<div class="field-group">
<input type="password" name="password" placeholder="Password" id="password" class="form-control" ng-model="password" required />
<span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
But when we remove the ng-model Its working fine. I am new in AngularJs.
Thanks in advance !!
provide novalidate in form tag and please check with this code
<form name="form" novalidate>
<div class="field_w3ls">
<div class="field-group">
<input type="text" name="email" placeholder="Email" id="email" class="form-control" ng-model="email" ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/" required/>
<span ng-if="form.email.$dirty && form.email.$invalid" class="help-block">
<span ng-show="form.email.$error.required">Email is required</span>
<span ng-show="form.email.$error.pattern">Invalid email</span>
</span>
</div>
</div>
<br/>
<div class="field_w3ls">
<div class="field-group">
<input type="password" name="password" placeholder="Password" id="password" class="form-control" ng-model="password" required />
<span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span ng-if="form.password.$dirty && form.password.$invalid" class="help-block">
<span ng-show="form.password.$error.required">password is required
</span>
</span>
</div>
</div>
</form>
** In controller give **
$scope.email = '';
$scope.password = '';
Name your form like name="loginForm", and check for $invalid in the form email field, as you want to validate for required and pattern.
<form name="loginForm" novalidate>
<div class="field_w3ls">
<div class="field-group">
<input type="text" name="email" placeholder="Email" id="email" class="form-control" ng-model="email" ng-pattern="/^[^\s#]+#[^\s#]+\.[^\s#]{2,}$/" required />
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span ng-show="loginForm.email.$dirty && loginForm.email.$invalid" class="help-block">Email is required</span>
</div>
</div>
<div class="field_w3ls">
<div class="field-group">
<input type="password" name="password" placeholder="Password" id="password" class="form-control" ng-model="password" required />
<span toggle="password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
The problem is that when i click on the button nothing happens at all which it should be at least to me.
I don't need a direct answer. Just a hint, or a pointer of what can be going on.
Here is part of the code for the modal form
<div class="modal-body">
<form Method="POST" id="Signin-Form" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_uname" id="txt" type="text" class="form-control input-lg" placeholder="Enter User Name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input name="txt_umail" id="email" type="text" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass" id="pass1" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass2" id="pass2" type="password" class="form-control input-lg" placeholder="Confirm Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg"><i class="glyphicon glyphicon-open-file">CREATE ACCOUNT!</i></button>
</form>
You need to add action attribute to the form to be able to send the form-data when the form is submitted.
Sample code below
<form action="submittedpage.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
After you click submit button, the form data is sent for processing to a PHP file named "submittedpage.php". The form data is sent with the HTTP POST method.
To display the submitted data you could simply echo all the variables. The "submittedpage.php" see the code below:
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
You can see this link for more info in form handling.
https://www.w3schools.com/php/php_forms.asp
Hope this helps.
I'm using Angular 4 to build a form and required attribute is not working. I tried adding <form ngNativeValidate>...</form> as suggested by many answers but i got :
Attribute ngNativeValidate is not allowed here.
Here is my code :
<form #f="ngForm" (ngSubmit)="submit()" ngNativeValidate>
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-def btn-block">Submit</button>
</div>
</form>
try to replace this : <input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>
with this : <input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>
so all your code should look like this :
<form #f="ngForm" (ngSubmit)="submit()">
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>
</div>
<div class="alert alert-danger" role="alert" *ngIf="!email.valid && email.touched" >
<span *ngIf="!email.valid"> This field is required</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-def btn-block">Submit</button>
</div>
</form>
Also remove the unnecessary ngNativeValidate and it should work now.
I have a problem with layout bootstrap. I want the search button to remain at the end of the line.
Here is my code:
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button> //this not part form input
output:
I want the layout like this:
How can this resolved?
1)Place search button into the form.
2) If you don't want to place the search button into the form, then try the below code.
Just, make the form inline.
form {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>
Note: View the output in full page mode.