I have an angular form. I am trying to implement some validation on required fields, like in this nice tutorial, which says that angular has this functionality "built in". However- it isn't working for me. When I submit the form without having filled out the fields, nothing happens. Can anyone see why?
<form id = "myForm" name="myForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine && submitted }">
<input type="text" name="name" class="form-control" ng-model="company.name" required>
<p ng-show="myForm.name.$invalid && !myForm.name.$pristine" >Your firm's name is required.</p>
</div>
<br />
<br />
<div class="form-group" ng-class="{ 'has-error' : myForm.address.$invalid && !myForm.address.$pristine && submitted }">
<input type="text" class="form-control" id = "address" name="address" ng-model="company.address" required>
<p ng-show="myForm.address.$invalid && !myForm.address.$pristine" class="help-block">Your address is required.</p>
</div>
<button type="submit" ng-click= "createAccount()" class="btn btn-small btn-primary">GO
</button>
</form>
I have also included $scope.submitted = true; in my createAccount() function.
Remember that AngularJS is a client side framework. Your validation must be performed before you submit something.
Add ng-disabled to your submit button:
<button type="submit" ng-disabled="myForm.$invalid" ng-click= "createAccount()" class="btn btn-small btn-primary">GO</button>
Or check the validation status in the createAccount() function like in the tutorial example you are referring to:
if (!$scope.myForm.$valid) {
alert('Something is wrong');
}
Related
Html template below
<form class="form" #pubForm="ngForm">
<div class="form-group">
<label for="name">Publisher Name:</label>
<input type="text" #name id="name" ngControl="name" #name="ngForm" class="form-control" placeholder="Enter Name" style="width:50%;" required maxlength="50">
<div *ngIf="name.touched && name.errors">
<div class="alert alert-danger" *ngIf="name.errors.required" style="width:50%;">
Name is Required (Maxlength is 50 characters)
</div>
</div>
</div>
<div class="form-group">
<label for="status">Status:</label>
<label class="radio-inline">
<input type="radio" name="options" (click)="model.options = 'active'" [checked]="'active' === model.options">Active
</label>
<label class="radio-inline">
<input type="radio" name="options" (click)="model.options = 'inactive'" [checked]="'inactive' === model.options">Inactive
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" (click)="onSubmit(pubForm.value)">Submit</button>
<button type="cancel" class="btn btn-default">Cancel</button>
</div>
</form>
Component code below
model = { options: 'active' };
onSubmit(form:any) : void {
form.status = this.model.options;
console.log(form);
}
On console log now I get object on form submit but I want to pass radio button value as name input box value is passed automatically on form submit in my form above. How to do pass radio button selection as form data ? The input name above is being passed automatically on click of Submit.
I recently started working with the Smarty Template system in my CodeIgniter projects.
All works fine and I was able to echo strings and dates. But now I have a problem with the 'form_open()' function.
view_login.tpl
<form class="contact-form" action="login/process" method="post">
<div class="row">
<div class="form-group">
<label for="username">USERNAME</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">PASSWORD</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-flat flat-color">LOGIN</button>
<button type="button" class="btn btn-flat pull-right">Forgot your password?</button>
</div>
</form>
As soon as I replace the HTML tags the view doesn't load anymore. I need the form_open() because of the Cross Site Request Forgery (CSRF).
So far I've tried:
{ form_open('login/process') }
{ form url='login/process' }
{{ form_open('login/process') }}
{php} echo form_open('login/process'); {/php}
Anyone else had the same problem or knows how to fix this?
Without Smarty I never had problems with this.
Solved!
I autoloaded the form helper file.
$autoload['helper'] = array('url', 'form');
And then I used the following code:
{form_open('login/process')}
<div class="row">
<div class="form-group">
<label for="username">USERNAME</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">PASSWORD</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-flat flat-color">LOGIN</button>
<button type="button" class="btn btn-flat pull-right">Forgot your password?</button>
</div>
{form_close()}
Looking at the code given above, it does not seem that the reason why the error occurred was because of the not loading the helper functions, though that may be one of the reason.
I believe the error is mainly because you added spaces between the delimiters { and }.
The default value in Smarty for the right and left delimiters are { and } respectively. Meaning:
{form_open('')} // Ok!
{ form_open('') } // Not Ok!
So, if you would like to use the second version, you will have to change your smarty settings for the right and left delimiter:
$smarty->left_delimiter = '{ ';
$smarty->right_delimiter = ' }';
Also, when you tried
{php} echo form_open('login/process'); {/php}
I believe it did not work because you are using Smarty 3. The {php} tag is deprecated in Smarty 2 and removed in Smarty 3. If you still want to use the {php} tag, you would have to use SmartyBC.
Using Angular to design a form with 3 inputs (based on Scotch.IO tutorial for Node+Express+Angular).
I would like the user to compulsorily select values for each input before submitting the form. If he doesn't, then I would like to display an error message.
<form>
<div class="form-group">
Start Date: <input type="date" class="form-control input-lg text-center" ng-model="formData.fromDate" placeholder="yyyy-MM-dd">
</div>
<div class="form-group">
End Date: <input type="date" class="form-control input-lg text-center" ng-model="formData.toDate" placeholder="yyyy-MM-dd">
</div>
<div class="form-group">
Report Type: <select class="form-control input-lg text-center" ng-model="formData.reportType">
<option value="csv">CSV</option>
<option value="pdf">PDF</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="findStat()">Add</button>
</form>
In other words, i would not like to pass 'undefined' values back to my Node.js code.
I have tried using 'required' options, which doesn't prevent undefined values from being passed back.
Give your form a name:
<form name="myForm">
Also give your inputs a name, and add validity constraints on them (required, etc.):
<input type="date" name="date" ...
Then in your findStat() function, you can access the form and check if it's valid:
$scope.findStat = function() {
if ($scope.myForm.$invalid) {
$scope.displayError = true;
}
else {
$scope.displayError = false;
...
}
}
See http://code.angularjs.org/1.2.15/docs/api/ng/directive/form and http://code.angularjs.org/1.2.15/docs/api/ng/type/form.FormController for more information.
I am trying to develop my first component for Joomla. I have installed Joomla 3, and things are going pretty good.
I want to add a form validation (client side) on the frontend, where I have a submission form.
My code is:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
The validation works, but does not show any message error - just a field. The HTML for the error field is:
<div id="system-message-container">
<div id="system-message" class="alert alert-error">
<h4 class="alert-heading"></h4>
<div></div>
</div>
</div>
So, how do I add text to the validation? Do I need to create a language file for my component?
You need to change form submit button as input
Try this-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<input type="submit" name="submit" value="Submit" />
</form>
Update:-
You can try this also-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form name="adminForm" id="myForm" method="post" onsubmit="return submitbutton();">
<input id="email" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton() {
var f = document.adminForm;
if (document.formvalidator.isValid(f)) {
document.adminForm.submit();
return true;
}
else {
var msg = new Array();
msg.push('Invalid input, please verify again!');
if($('email').hasClass('invalid')){
msg.push('<?php echo JText::_('Invalid Email')?>');
}
alert (msg.join('\n'));
return false;
}
}
</script>
This will validate form at the client side but not in server side.
For more info check this - http://docs.joomla.org/Form_validation
also make sure you have added this code in the index.php
<jdoc:include type="message" />
I've just had this very problem. The issue is that you don't have a label associated with the form field, Joomla validation code builds the error message from the label text.
If you don't want the label to appear then set it to hidden (if you're using bootstrap use the hidden class). You must add a for clause to the label. If you also give it an id which is the set to the input id + '-lbl', then it will optimise the speed of the label lookup.
<form class="form-validate" id="myForm" method="post">
<label class="hidden" for="inputid" id="inputid-lbl">Form label</label>
<input id="inputid" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
I'm new to React and reactstrap and I was wondering how to setup a form that posts to a post-route on submit using the Form-tag. I couldn't find an example in the documentation that did this. So I'm looking for an equivalent of this:
<form action='/signup/insert' method = 'POST'>
<div class="form-group">
<input id ='signup' type='text' name='uid' placeholder='Username'><br>
<input id ='signup' type='password' name='pwd' placeholder='Password'><br>
<input id ='signup' type='text' name='email' placeholder='E-mail address'><br>
<button id = 'switch' type='submit'>Sign Up</button>
</div>
</form>
And I want something like this:
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="noreply#noreply.com"
/>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password"
/>
</FormGroup>
<Button>Sign Up</Button>
</Form>
Do I have to add this in the button tag? How to do this? My route is by the way already set up, so I just need to post it from here.
Exactly the same way as in your example without Reactstrap. Form component passes any properties that you provide to the <form> tag that gets rendered on your page so this code <Form action='/signup/insert' method='POST'> will work (if your backend is set up to handle the request.