I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.
Related
I have the following HTML.
When you choose an email to autocomplete, Chrome populates all of the input fields with the same address - overwriting any existing data. what am i missing?
<form autocomplete="off">
<div class="form-group">
<label> Email addresses: </label>
<div class="input-group mb-3">
<input class="form-control" type="email" name="recipient-0">
</div>
<div class="input-group mb-3">
<input class="form-control" type="email" name="recipient-1">
</div>
<div class="input-group mb-3">
<input class="form-control" type="email" name="recipient-2">
</div>
</div>
<button type="submit" class="btn btn-primary">
Request
</button>
</form>
I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.
Trying to get Angular-ui-validate to work with my form with bootstrapcss
Here is the HTML
<div class='container' ng-controller='RegisterController as ctrl'>
<form class="form-register" ng-submit="ctrl.register()">
<h2 class=form-user-details">General Information</h2>
<div class="form-group">
<label for="inputEmail1">Email address</label> <input type="email"
class="form-control" ng-model='inputEmail' id="inputEmail1"
placeholder="Email" required autofocus> <span
style='font-size: 10px; color: red'>Note: Your email will
serve as your username!</span>
</div>
<div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
<label for="inputPassword">Password</label> <input name='password'
type="password" id='inputPassword' ng-model='password'
class="form-control" placeholder="Enter Password" ng-minlength="6" ng-maxlength="30" required>
<input type="password" class="form-control" name='confirm_password'
placeholder="Re-enter Password" ui-validate="'$value==password'"
ui-validate-watch="'password'">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Create
Account</button>
</form>
</div>
Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js
Link to example I saw:
password-check directive in angularjs
3rd example down
Seems easy enough but !form.confirm_password.$error.validator is always true without exception
Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...
Then I needed to add a ng-model to the confirm_password field...
And finally I needed to add the name form to my form.
Then it worked...
I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);
I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>
Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
Any guess what am I missing. Any module that i need to include ?
Here is Plunker
First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
One more thing, add 'novalidate' to the form element.
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>
You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
Here is a working plunkr for what you are trying to do.
This is the relevant code:
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+#\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>
Well, I am not sure but I think you also have to use $error with $dirty like this:
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidate to disable default browser validation like this:
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>