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
Related
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>
I have created a register form inside a modal of index page , when user submit it, user gets directed to 2nd page which is confirmation through PHP.
If users gets an error it is necessary to go back to previous page and fill the whole form again, how can i save the values inputted by user recently and when he gets redirected to previous page he see the form but filled of his recent values
<div class="modal fade" id="registermodal" 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"> x </span><span class="sr-only">Close</span></button>
<h3 class="modal-title text-center" id="lineModalLabel"> Register </h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form action="confirmation.php" method="POST" enctype="multipart/form-data">
<div id="cfirstname" class="form-group" style="float:left;width:45%;">
<label for="firstname"> First Name </label>
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off">
</div>
<div id="clastname" class="form-group" style="float:right;width:45%;">
<label for="lastname"> Last Name </label>
<input oninvalid="this.setCustomValidity('Please enter your last name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" autocomplete="off">
</div>
<div id="cemail" class="form-group" style="clear:both;">
<label for="email"> Email </label>
<input oninvalid="this.setCustomValidity('Please enter your email name')" oninput="setCustomValidity('')" required type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div id="ccategory" class="form-group" style="clear:both;">
<label for="category"> Category </label>
<input oninvalid="this.setCustomValidity('Category is Required')" oninput="setCustomValidity('')" required type="text" class="form-control" id="category" name="category" placeholder="Category" autocomplete="off"> <span class="help">Enter the category you are expert in </span>
</div>
<div class="form-group ">
<label for="Password"> Password </label>
<input oninvalid="this.setCustomValidity('Please enter a password)" oninput="setCustomValidity('')" required type="password" class="form-control" name="rpassword" id="password" placeholder="Password" autocomplete="off">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
</div>
<div class="form-group ">
<label for="Password">Confirm Password </label>
<input oninvalid="this.setCustomValidity('Please confirm your password')" oninput="setCustomValidity('')" required type="password" class="form-control" name="rcpassword" id="cpassword" placeholder="Repeat Password" autocomplete="off">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
<div id="cfblink" class="form-group">
<label for="fblink"> Facebook profile link </label>
<input type="text" class="form-control" id="fblink" name="fblink" placeholder="Facebook Link" autocomplete="off">
</div>
<div class="form-group">
<label for="ppic">Please upload an image of yourself</label>
<input class="btn btn-default" required="required" type="file" name="file" id="file">
<span id="cppic" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Image uploaded
</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" role="group">
<button type="submit" id="signup" name="signup" class="btn btn-default btn-hover-green" role="button"> Proceed </button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
well i found answer myself just put the variable as value input tag
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off" <?php echo 'value="'.$variable_name.'"'; ?> >
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>
Before using Struts2 I had the following code :
<form class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" placeholder="Identifiant" name="username" value="" required autofocus>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" placeholder="Mot de passe" class="form-control" name="password" required>
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-12 controls">
<button id="btn-login" class="btn btn-success" type="submit">Se connecter</button>
</div>
</div>
</form>
And I had the following
I tried to insert Struts tags, so I have this code now :
<s:form action="actionA" method="post" cssClass="form-horizontal">
<div style="margin-bottom: 25px;" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield cssClass="form-control" name="identifiant" placeholder="Identifiant" required="true"/>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<s:password cssClass="form-control" name="motDePasse" placeholder="Mot de passe" required="true"/>
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-12 controls">
<s:submit key="submit" cssClass="btn btn-success" value="Se connecter"/>
</div>
</div>
</s:form>
The problem is that the display has changed
Do you know why the display is not the same?
The view is not the same because the document is not the same. Struts2 UI tags generate some HTML and javascript content behind the scene that you can see looking in the browser source window. If you want to keep changes as less as possible you can use simple theme on the form tag
<s:form action="actionA" method="post" cssClass="form-horizontal" theme="simple">
or configure it globally in struts.xml
<constant name="struts.ui.theme" value="simple"/>
You can read more about themes in Struts 2 Themes.
I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this (only with the icons prepended of course). How can this be solved?
My code:
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password"/>
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.
Before that you can fix it your self like this:
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto !important;
}
}
i've made it work like this:
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</div>
http://jsfiddle.net/n5qmc/
Taken from Bootstrap Docs
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
I also added in semantic attributes for the labels you should always be using on every input (use .sr-only to hide the labels if necessary). This makes the form not inline but horizontal.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw"></i>
</span>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="input_one">Label Text</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
<span class="input-group-addon">Add on text</span>
</div>
</div>
</div>