I am creating a login form for my Ember.js application, and would like to take advantage of the 'required' attribute on inputs for easy client-side validation. However, it seems that this validation does not work when I add an Ember action to the submit button.
For example:
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<button {{action 'login'}} class="btn btn-success btn-block">Sign in</button>
</div>
</form>
The moment I remove {{action 'login'}} the validation works, otherwise it does not.
How can I get around this issue? Thanks.
Adding the action to the button will circumvent the form submit procedure, you'll want to add it to the form submit, and it will only be hit once the form attempts to submit.
<form class="form-horizontal" {{action "login" on="submit"}}>
...
</form>
http://emberjs.jsbin.com/tomolevi/1/edit
Related
I need to disable search button, when text-box empty. I tried to add disable attribute to search button. but its not working.
This is my html code:
<div class="col-md-5 pl-0">
<div class="input-group mb-3">
<input
type="text"
placeholder="Enter MTCN Number"
maxlength="16"
class="form-control mtcn-textbox"
[formControl]="mtcn"
required
type="text"
aria-describedby="basic-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-primary"
type="button"
(click)="retrieveData()"
[disabled]="mtcn"
>
Search
</button>
</div>
</div>
</div>
Can someone help me to achieve this?
You can disable your button just using [disabled]="!mtcn.value".
Or you can disable button if your form is not valid: [disabled]="!myForm.valid"
You can try [disabled]="!mtcn.value" or put your code into Form tag and giv it an id and use "form.valid"
Please note that mtcn is a FormControl, which is always truthy. You want to check the value of the FormControl.
You have 2 possibilities.
1. disabled attribute
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [disabled]="!mtcn.value">Search</button>
</div>
</div>
2. disabled class (since it seems you are using bootstrap)
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [ngClass]="{ disabled: !mtcn.value }">Search</button>
</div>
</div>
The [disabled]="!mtcn.value" would work, but I'd like to strongly advise against it. Assume you want to add some other validation rules (length, pattern, whatever) - you'd need to repeat the same thing twice, in the form control itself and in the button. In the long run, it'll get tedious to maintain and invite bugs.
Just go
<button [disabled]="mtcn.invalid">
Edit: Oh, and if you're using [formControl], put the validation rules in the mtcn definition in the TypeScript, not in the template, right now you're mixing model driven and template driven forms.
I recently mirrored a login Html Template. I want a user who enters a specific username and password to be redirected to another page and any other login detail entered get an error alert. Could you kindly help me out?
Find the code below:
<h3>Sign into your account</h3>
<form action="index-bank-2.html" method="GET">
<div class="form-group">
<input type="email" name="email" class="input-text" placeholder="Email">
</div>
<div class="form-group">
<input type="password" name="Password" class="input-text" placeholder="Password">
</div>
<div class="checkbox clearfix">
<div class="form-check checkbox-theme">
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
<label class="form-check-label" for="rememberMe">
Remember me
</label>
</div>
Forgot Password
</div>
<div class="form-group mb-0">
<button type="submit" class="btn-md btn-theme btn-block">Login</button>
</div>
</form>
<form action="index-bank-2.html" method="GET">
is wrong..you need PHP or any back-end language to validate your login credentials. You may try like this
<form action="validate_user.php" method="POST">
Create validate_user.php file and you need POST method instead of GET because you are sending data over HTTP and GET request(read up on HTTP request) only used to retrieve data.
Quick google by me: https://www.tutorialrepublic.com/php-tutorial/php-mysql-login-system.php
You may refer above link to implement what you are looking for. Good luck!
Is it a good practice to write own forms in django templates isntead of creating built-in django forms?
Like this:
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-4">
<form method="post" >
{% csrf_token %}
<div class="form-group">
<label for="username">UserName</label><br>
<input type="text" id="username" placeholder="username" name="{{ form.username.name }}"
class="form-control">
</div>
<div class="form-group">
<label for="password1">Password</label><br>
<input type="password" id="password1" placeholder="password"
name="{{ form.password1.name }}" class="form-control">
</div>
<div class="form-group">
<label for="password2">Password</label><br>
<input type="password" id="password2" placeholder="password" name="{{ form.password2.name }}"
class="form-control"> <span id="help"></span>
</div>
<input type="submit" class="btn btn-primary form-control" value="Send">
</form>
</div>
</div>
</div>
Django's docs say the following about their role in form creation:
"preparing and restructuring data to make it ready for rendering"
"creating HTML forms for the data"
"receiving and processing submitted forms and data from the client"
source: https://docs.djangoproject.com/en/2.1/topics/forms/
If you want to let them do the heavy lifting and manage those three things listed above then why not? No need to re-invent the wheel unless you are doing something that requires it. It really depends on what you're building.
As a heavy user of django and its forms. I recommend django forms with django-crispy-forms. This is the best package you can use to customize a form by functionality and/or layout. They have ready template forms for bootstrap too which I use for most of my projects.
Hope this helps!
I have a custom page template with a form. And this form displayed in many pages using shortcode. When the user click the submit button, the user will redirect to a "Thank you" page. This thank you page is a static (created using the WP page editor) with a href. Now, when the user click that a href (found in the thank you page, he/she will redirect to the page url where the user submit the form but in the specific portion of the page where the user came from. But I don't know how to do this. Can anyone help me with this?
<form method="POST">
<span class="icon-pp-green-ribbon"></span>
<fieldset>
<div class="form-group">
<label for="customer_fname"><span class="icons-asterisk"></span> Your name:</label>
<input type="text" name="name_first" placeholder="" required/>
</div>
<div class="form-group">
<label for="customer_tsname"><span class="icons-asterisk"></span> Your surname:</label>
<input type="text" name="name_last" placeholder="" required/>
</div>
<div class="form-group">
<label for="email">Your e-mail:</label>
<input type="email" name="email" placeholder="#"/>
</div>
<div class="form-group">
<label for="phone"><span class="icons-asterisk"></span> Phone number:</label>
<input type="text" name="phone" pattern ="^09\d{9}$" onkeypress="return isNumberKey(event)" size="11" placeholder="09" required/>
</div>
<div style="margin-top: 1.50em;">
<input type="checkbox" id="utm_checked" checked style=" float: left; transform: scale(1.2);"/>
<label for="utm_checked">I want to be occasionally notified</label>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send"/>
</div>
</div>
</form>
Try this button maybe as told here:
<input action="action" type="button" value="Back" onclick="window.history.go(-1); return false;" />
If your previous page URL does not have page section info like www.yoursite.com/somePage#someSection, you can push custom URL to the history stack before leaving that page, so that whenever your go back, you not only go back to the page but also the specific portion that you came from. You can push custom URL to the history stack maintained by the browser as described here
Try this code to utilize page visit history maintained by the browser:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>
Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>
All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.