We Keep Coding

How to prevent to reset or clearing the django form fields if any error occurs during submit?

I am using django registration-redux for user registration.
When i enter a same userid it shows error and the clears all the input fields of the form. how to prevent that error should occurs but input fields shouldn't get cleared.
<form method="POST" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 lab" for="id_username">Username *</label>
<div class="col-sm-10">
<input name="username" id='id_username' class='form-control' placeholder='Username' minlength="5" maxlength="15" type='text' required></div>
</div>
<div class="form-group">
<label class="col-sm-2 lab" for="id_email">E-Mail *</label>
<div class="col-sm-10" >
<input class='form-control' name="email" id='id_email' placeholder='user#mydomain.com' pattern="(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.com$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.org$)|(^[a-zA-Z0-9_.+-]+#[a-zA-Z]+\.co\.in$)" maxlength="200" type='email' required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab">Password *</label>
<div class="col-sm-10">
<input class="form-control" name="password1" id="id_password1" placeholder="Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 lab2">Password Confirmation *</label>
<div class="col-sm-10">
<input class="form-control" name="password2" id="id_password2" placeholder="Confirm Password" minlength="8" maxlength="15" type="password" required>
</div>
</div>
<button type="submit" value= "register">Register</button>
</form>
should i use java script or what should help me?

Ideally your form should retain the entries. From what I can infer, it seems that you might not in your template you are not making use of form passed by the view.
Here is an example on how you can update the template:
<form action="/action/" method="POST">
{% csrf_token %}
<div class="form">
<br />
{{ form.username}}
<br />
<input type="submit" name="submit">
</div>
</form>
Now in your action view you can easily pass the variables in your form. Something like :
def action(request):
if request.method == "POST":
form = CustomForm(request.POST)
if form.is_valid():
form.save()
else:
print("form.errors:", form.errors)
else:
form = CustomForm()
ResponseDict = {"username": username}
return render_to_response("UserName.html", ResponseDict,
context_instance = RequestContext(request))
For more reference - Displaying form using template
The main essence is in you going to your view and then making the necessary calls. Please do note that wherever you are rendering the html you are also passing the form values.
Hope this helps.

AngularJS form validation is always true

loginForm.$valid is always return true, even when required fields are not filled out. I was unable to find a similar problem anywhere.
<form name="loginForm"
class="form-login"
ng-submit="loginForm.$valid && loginCtrl.login(navCtrl)"
novalidate>
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
</div>
<div class="form-group text-right">
Forgot password?
</div>
<div>Login form is {{loginForm.$valid}}</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
Any help is appreciated.

Form validation and related flags will be set only if you have ng-model controllers assigned to the respective controls. So assign ng-model directive to them. Also instead of using id, you could use name. It will then be used as alias (property names) for the respective ng-model controller assigned on the formController instance (ex: loginForm.username.$valid ).
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control"
ng-model="ctrl.userName"
name="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
ng-model="ctrl.password"
name="pwd" placeholder="Enter password" required>
</div>

I had this problem too. The answer was required syntax wasn't there.
So it was always valid to submit the form.

Remember.
if you are on angular 5 material design and using [ngModelOptions]="{standalone: true}" in input field make it false ==> [ngModelOptions]="{standalone: false}"

How to validate one big form

I will try to explain my problem:
I have one form (I can make second, but i want to have one). And I want to validate the form Using HTML5 or by Jquery plugin for validation and the problem is:
One of the form-fields are for registred users and another one is for new users. So I need to detect valid form or focused? Because HTML5 wan to validate full form. How you are solving this problem? BTW: I'm using Bootstrap 3.
For Exp:
<div class="col-md-12 well">
<div class="col-md-6">
<form id="checkout-login" action="" method="post">
<h3>Existing User</h3>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<div class="col-md-6">
<h3>New user</h3>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="input-fancy" id="name" placeholder="Name" name="name" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" class="input-fancy" id="surname" placeholder="Priezvisko" name="surname" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-Mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Pokračovať"></input>
</form>
</div>
JQuery, please help me with ** and you can ignore //
$(document).ready(function () {
$("form").submit(function (e) { e.preventDefault() });
if(**find valid form){
$("**then $(this) is valid --> send").submit(function (e) {
e.preventDefault();
$.ajax({
url: '',
data: //my custom,
success: function (data) {
//Show Thank you
},
cache: false
});
});
}else{
//Show alert please register or login
}
});
Thank you for any answer, advice or comment.

here is the validation plugin jquery validate demo, i used it with bootstrap. It has lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales.
Code is available on https://github.com/jzaefferer/jquery-validation

Bootstrap 3 form submission

I'm using bootstrap 3 to build a contact form and I have the following problem: If submitted empty, the form submits to the same page. If i enter values in the boxes, it will redirect to the homepage. This problem only occurs if I'm using a name="something" attribute for the input boxes. Does anyone have any idea why? HTML is this:
<form class="form" method="post" action="http://localhost/contact">
<div class="form-group">
<label for="name">Nume</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Numele tau...">
</div>
<div class="form-group">
<label for="email">Adresa email</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Adresa email...">
</div>
<div class="form-group">
<label for="subject">Subiect</label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Subiectul mesajului...">
</div>
<div class="form-group">
<label for="message">Mesaj</label>
<textarea class="form-control" name="message" id="message" rows="5" placeholder="Mesajul tau aici..."></textarea>
</div>
<button type="submit" class="btn btn-default">Trimite mesajul!</button>
</form>

You need an action to actually submit the form. The form won't do anything until you add an action to process the form and email it.
<form class="form-horizontal" method="post" action="contactform.php">
I use a variation of this form, http://www.html-form-guide.com/email-form/php-form-to-email.html

ng-class is not applied

I am trying to validate a form using AngularJS. This is my form:
<form ng-controller="LoginCtrl" role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: email.$invalid }" id="email">
</div>
</div>
</form>
The ng-class is never applied. I tried email.$valid, email.$invalid and email.$error. The controller doesn't do anything except for logging to the console, so I know it is called. When I do set $scope.email = 'asd#asd.com' hardcoded it is set correctly though.
Why isn't my ng-class applied when I enter no value or an invalid string?

You must qualify with the form name as well:
<form ng-controller="LoginCtrl" name="emailForm" role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: emailForm.email.$invalid }" id="email">
</div>
</div>
</form>
Angular has its own directive for <form> and therefore understands that if it sees a form, it should add an object to the current scope that is named the same. In this case emailForm. So, in the controller you would address the email field as $scope.emailForm.email.
Since, you are specifically looking for required you could also use this:
ng-class="{ error: emailForm.email.$error.required }"