I'm currently using Silex2 FormFactory to build a form and I stumbled on a problem.
I have a login page (login.twig), asking for email and a password. This form includes the validation. But I want to have this login form always in my header too (on my layout.twig ). I created the form and linked the action to the location of the login page. I had to manualy write the correct id and name of each input element, and I copied the generated token of the login.twig inside the form. But I doubt this is the correct way to do it?
<form class="navbar-form pull-right" action="{{ path('auth.login') }}" method="post" novalidate="novalidate">{# disables HTML5 formchecking #}
<input class="span2" type="text" id="loginform_email" name="loginform[email]" placeholder="Email">
<input class="span2" type="password" id="loginform_password" name="loginform[password]" placeholder="Password">
<input id="loginform__token" type="hidden" value="9eb2a291d32d114987aee1548da878201dd79a7b" name="loginform[_token]">
<button class="btn" type="submit">Sign in</button>
register here
</form>
As long as they are unique instances of the same form, and referenced differently it should be fine.
But I would suggest for usability reasons to simply hide the login form from the header on the login page. You can determine the name of your route and set it as a global variable perhaps:
$app->before(function (Request $request) {
$app['twig']->addGlobal('currentRoute', $request->get('_route'));
});
Then in your template:
{% if currentRoute != 'auth.login') %}
// output your form here
{% endif %}
Related
I have a Wicket page with this structure:
<form wicket:id="generalForm" method="post" class="form_recherche">
<input value="" type="text" wicket:id="myField_1" />
<form wicket:id="innerForm" method="post">
<input value="" type="text" wicket:id="myField_2"/>
<input type="submit" class="button-classic" wicket:id="accept_2"/>
</form>
<input type="submit" class="button-classic" wicket:id="accept_1" />
</form>
1 external form with 1 inner form. One field each. The fact is that when the "accept_2" button is clicked, the field "myField_1" is not submitted to the server (only the "myField_2" is submitted). And in fact, I would need the "field_1" field to do some validation.
What am I missing and why isn't the "myField_1" being filled on the server why "accept_2" is clicked?
You need to override Form#wantSubmitOnNestedFormSubmit() on the outer Form to return true. This way you will tell Wicket that you want the (outer) form to be submitted as well when one of its nested forms is submitted.
You used SO tags wicket-1.5 and wicket-1.6. I am not sure whether this method is available for your version of Wicket.
I have 2 forms on one page that I need to pass to the same page to assemble a pdf. How can I do that? I have tried using a action="post" for one and action="get" for the other, but I can't get that to work. I have tried assigning one form to session variables, but I can't get that either. Any suggestions??
<form name="formOne" id="formOne" method="post" action="#buildURL('goTothisPage.page')#">
<input name="name" id="name" autofocus="true" >
<input name="address" id="address" >
I would try just creating one big form instead of 2 smaller forms if the action is going to be the same and go to the same .cfm page. (Just expand the scope of your tags)
You can also create 2 "Submit" buttons (1 for each form) to make it appear as 2 separate forms, even though the buttons will submit the same form.
If it is required to have two separate forms in your html, it is also possible to forge the form values from one form into the other at the moment of the submit event.
HTML:
<form name="formOne" id="formOne" method="post">
<input name="name" id="name" type="text" >
<input name="address" id="addressHidden" type="hidden">
</form>
<form name="formTwo" id="formTwo" method="post">
<input name="address" id="address" type="text">
<input name="name" id="nameHidden" type="hidden" >
</form>
Javascript:
$(document).ready(function(){
$('#formOne').submit(function(event){
$('#addressHidden').val($('#address').val());
return true;
});
// same for #formTwo
$('#formTwo').submit(function(event){
$('#nameHidden').val($('#name').val());
return true;
});
});
When form is nested, the first inner form can not be referred in the controller scope.
I have created a minimal test to reproduce this issue at Plunker
angular version: 1.2.16
Browser: Chrome, Safari
What's the problem? is there any way to remedy?
I recommend a book called Mastering Web Application Development with AngularJs
There's a section called nesting forms and there it says that you have to nest the forms with ng-include. like so:
<script type="text/ng-template" id="password-form">
<ng-form name="passwordForm">
<div ng-show="user.password != user.password2">
Passwords do not match
</div>
<label>Password</label>
<input ng-model="user.password" type="password" required>
Creating Advanced Forms
[ 158 ]
<label>Confirm Password</label>
<input ng-model="user.password2" type="password" required>
</ng-form>
</script>
<form name="form1" novalidate>
<legend>User Form</legend>
<label>Name</label>
<input ng-model="user.name" required>
<ng-include src="'password-form'"></ng-include>
</form>
We define our subform in a partial template. In this case it is inline in a script block
but it could be in a separate file also. Next we have our container form, form1,which
includes the subform by using the ngInclude directive.
The subform has its own validity state and related CSS classes. Also, notice
that because the subform
I have found a workaround for this issue, just replace outer form tag with ng-form tag then the first inner form is added to the scope. see this plunker
What I would like to do is make all fields show their validation errors when:
visiting and modifying a field so that its dirty state is triggered (the default), and also
validating and triggering dirty when the submit is pressed
Take the following form
<div ng-form="MyForm">
<label>
<input type="text" name="numbers" ng-required="'true'" ng-pattern="/^[0-9]*$/" ng-model="numbers" />
<span class="error" ng-show="numbers.$error.required">Required</span>
<span class="error" ng-show="numbers.$error.pattern">Pattern</span>
</label>
<label>
<input type="text" name="characters" ng-required="'true'" ng-pattern="/^[a-z]*$/" ng-model="characters" />
<span class="error" ng-show="characters.$error.required">Required</span>
<span class="error" ng-show="characters.$error.required">Pattern</span>
</label>
<button ng-click="validateAndSubmit()">Submit</button>
</div>
Essentially, I would like to create a directive that validates (sets dirty to true) for all the controls in an arbitrary form. Is there a simple way to get the form controls from the FormController without finding the actual dom elements?
I have this situation in which I show 1 form in two steps. So to proceed to the second part of the form you have to click on a button. But before moving on I would like to perform form validation (all required fields need to be filled in). But because this is a normal button, the whole submit magic is not triggered and the validation does not happen. So the question I'm interested in is how can I trigger form validation in my controller ? It would even be better to trigger validation for specific fields. Just to give an idea, the form looks like
<form name="form" submit="save()">
<section id="step1">
<label for="username" required>Username</label>
<input type="text" name="username" ng-model="user.username" required />
.....
<button ng-click="proceed()">Proceed</button>
</section>
<section id="step2">
<label ...></label>
<input...>
....
<button type="submit">Save</button>
</section>
</form>
Also, I don't want to opt for disabling the button until all required fields are valid.
Take a look at the ng-form directive. It allows nesting forms (actually not HTML <form>s, but Angular NgFormControllers). So you can split your one form, used for posting to the server, into two logical forms, used for independent validation:
<form submit="save()">
<div ng-form="form1">
...controls...
<button ng-click="proceed()"
ng-disabled="form1.$invalid">Proceed</button>
</div>
<div ng-form="form2">
...controls...
<button type="submit"
ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
</div>
</form>
You can access the $valid property from your controller. Something like this could work.
$scope.proceed = function(){
if($scope.form.username.$valid){
//username is valid we may proceed to the next step
}
};
<button ng-click="proceed()">Proceed</button>
Replace To :
<button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>
Button will not visible button until all required fields are valid.
DEMO