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!
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!
I have downloaded a website using site sucker and I have all the html files. The website was developed using a CRM (it's my new client's website which I have to upload to my server asap and they don't have credentials for the same). I have a contact form which I want to make it work
Form code:
<form name="contactform" method="post" class="dmRespDesignRow" locale="ENGLISH">
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1289337126">
<label for="dmform-0" id="1623474142">Name:</label>
<input name="dmform-0" type="text" id="1049346235"/>
<input name="name" value="Name" type="hidden" id="1808095320"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1229775582">
<label for="dmform-1" id="1413734224">Email:</label>
<input name="dmform-1" type="email" id="1874224805"/><input name="email" value="Email" type="hidden" id="1790388701"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1182638845">
<label for="dmform-2" id="1659409819">Phone:</label>
<input name="dmform-2" type="tel" id="1363423394"/><input name="phone" value="Phone" type="hidden" id="1562324064"/>
</div>
<div class="dmforminput dmRespDesignCol small-12 newLine large-12 medium-12" id="1310223649">
<label for="dmform-3" id="1594580770">Message:</label>
<textarea name="message" id="1731760981"></textarea>
<input name="message2" value="Message" type="hidden" id="1794081407"/>
</div>
<div class="dmformsubmit dmWidget R" preserve_css="true" id="1012153111">
<input class="" name="submit" value="Send" type="submit" id="1446531284"/>
</div>
<!--<input name="dmformsendto" value="O0wrseIfFLsSlLR4GAldF3Dy0PQjrXVAFxL5GhwSjRb9oqY0OVrc11ouhyoy2GDw/aszBHJnGyRKqT/UtxxJVGSoojrduF5h" preserve_css="true" type="hidden" id="1937799400" data-success-page="" data-dec="true"/>-->
<input class="dmActionInput" name="action" value="form_email.php" type="hidden" id="1733868877"/><input name="dmformsubject" value="Form Message" preserve_css="true" type="hidden" id="1339178452" data-success-page=""/>
</form>
I tried creating a new file i.e form_email.php and adding as action in the form but no luck. If I create a separate form test file (plain html without any classes) it works using that php file but doesn't work when integrating it with the actual form. I am not able to figure out what's the issue.
If you are not using JavaScript to intercept the form the action attribute should be added to the form tag, and not to an input. Example:
<form name="contactform" method="post" action="form_email.php" class="dmRespDesignRow" locale="ENGLISH">
In addition you must make sure that form_email.php is being correctly requested. If the file's location is not within the same directory the HTML file is (or the directory in which the CMS designated as such) you must fix the action attribute so that it points to the correct location. For example, if form_email.php is one level up (in the directory above the HTML file) you would reference it as such: action="../form_email.php".
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
I'm trying to match up passwords using Parsley.js but it doesn't seem to be working. Here is the code:
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password" name="password" placeholder="" class="input-xlarge" data-trigger="change" data-required="true" data-minlength="6">
</div>
<p class="help-block">Password should be at least 4 characters</p>
</div>
</div>
<!-- ************ NOT WORKING *************** -->
<div class="control-group">
<!-- Password -->
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge" data-equalto="#password" data-trigger="change focusout" data-required="true" >
</div>
<p class="help-block">Please confirm password</p>
</div>
</div>
This part data-equalto="#password" should do the check, but it doesn't seem to work.
I call the parsley validate in the form like so:
<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">
Been struggling with this for a few hours, found the answer courtesy of JoelCDoyle. I want to re-iterate it because though the question is dated, the answer provided by Joel works. Thanks! :)
<input type="password" name="pw" id="pw"
parsley-minlength="8"
parsley-required="true"
/>
<input id="pwtwo" type="password" name="pw-verify"
data-parsley-equalto="#pw"
parsley-required="true"
/>
this is the attribute you need to make the compare function work with parsley.js:
data-parsley-equalto="#pw"
I'm not sure if this will help you but I have a working solution here: http://codepen.io/anon/pen/KNyjoY
Basic installation
<form data-parsley-validate>
...
</form>
Javascript installation (I'm using this)
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I have added an event for #password to trigger #cpassword form validation.
$('#password').on('change input keyup', function() {
if (this.value) {
$('#cpassword').prop('required', true).parsley().validate();
} else {
$('#cpassword').prop('required', false).parsley().validate();
}
});
In the newest Parsley Version, you don't call the API by "data-" Attributes anymore. Not quite sure, if this is the case on your Version (i know data values worked in the past), but try it with the New API.
Therefore you call the form different with the property "parsley-validate" which is True if Set. And the Constraints are called with "parsley-[constraint]".
As stated on the official Parsley.js Site, its not quite W3C compatible, but for some weird Reason he likes it like that. However he also gives an Solution with defining a Namespace for Parsley to make it W3C compatible.
If you can Deliver the old Parsley version, I could have a look on that too.
Attention
This answer (and maybe question) is dated.
The answer may not be valid anymore, keep a look at the Comments on this answer.