My UI has a batch editable grid with column called Rank and fixed number of records ( say 5 records and no paging ). The field Rank has to be validated and should always input in the ascending order ( say 1,4,6 7, 9). These inputs has to be validated before submitting and would like to show in-line validation message against the edited cell.
I tried following
Using [Remote] validation attribute, but no way to pass the entire grid data.
Using OnSave client event, not sure how to add the in-line validation messages
Any suggestion on this would be greatly appreciated,
-George
Try adding this jquery.validate.unobtrusive.min.js Javascript reference in your view page. And the remote validation will exactly post all the input parameters to the action method. There you can return either true or false.
In order to pass the entire grid data using [Remote] validation attribute, you have to make the grid data in this format for each data:
<input name="col1" value="col1_Value">
The name "col1" must be match as a parameter in your controller, so that the value can be passed.
You can achieve this by doing a little trick using jquery.
Related
I have a form. This form contains array of products i.e
[{"productId":"12121212","count":5},{"productId":"22222222","count":6}]
What i need is to :
Validate the form on client and disable submit when any of product array fields are invalid.
Can i use validators like i work plain form fields and check like:
myForm.product[i].productId.$invalid,
myForm.product[i].productId.$error.required
?
Validate the form on server when submit and pass back errors to client. Now i attach service prop 'error', but it seems not common way to angularjs validation.
Plunker link:https://plnkr.co/edit/kbLs3SJE5ybNxIvo3ynq
Any suggestions. Thanks!
It is best to validate the input fields on client side first. To disable the submit button based on validation you can use ng-disabled="myForm.$invalid" on submit button. This will work for HTML validations on input fields like required, ng-minlength, ng-maxlength, etc.
However for complex validations on field, you can write a function and call it: ng-disabled="isFormValid()". This function will iterate through all values and check if they are valid.
i am creating a web app in which i want to see my record on different textboxes
[{"attendee1":"o","attendee2":"p","totalmale":"2","totalfemale":"2","unit1":"o","unitd1":"o","unit2":"o","unitd2":"o","unit3":"o","unitd3":"o","unit4":"o","unitd4":"o","unit5":"o","unitd5":"o","remarks":"o"}]
this is how my records are coming from webservice when i supply a parameter((string id)) how i need to retrieve the record and show the record on my textbox with the help of AngularJS
this is my js file
$http.get('/frmattendencerptqed.asmx/getuprec', {
params: {
id: $scope.updateparam.comsonvinid
}
})
now what i need to do when i want to print the records in different textboxes
my textboxes are in input field
<input type="text" ng-model="attendee1" />
this is how all my textboxes are
i need your help what i need to do when i want to show the record on my textboxes
According to the data you provided i made small example for you.in this you need to assign your result to a scope variable like below
$scope.something=your result;
from this fetch your value and assign to your model,here i am taking attendee1 and assigning to model
$scope.attendee1=$scope.something[0].attendee1;
like this you need to give what ever you want from that result.
Demo
By default, Parsley only handles updating a single element's class (usually the input field in which the invalid entry is). However, with Bootstrap 4 we must update both the form-group and the input field classes to render them with the validation icons. Otherwise, only the border colour is changed.
How can I use Parsley to correctly, completely style my input fields when validating user input in the client?
In order to correctly style Bootstrap 4 with Parsley, you must modify the classes of the div.form-group surrounding your input fields (assuming you want the validation icons, like I did).
According to the documentation you need to add .has-success or .has-danger to the div.form-group and then specify form-control-success and form-control-danger respectively to the input fields.
However, Parsley only supports updating the class on a single element by default. Fortunately, it supports event binding, so with a little function added to the end of your parsley.js file, we can handle updating the div.form-group styles when the user has fixed a validation error.
First configure Parsley:
errorClass: "form-control-danger",
successClass: "form-control-success"
These are the correct classes to apply to the input fields, which Parsley works on by default. Next, append the following to the parsley.(min).js file.
window.Parsley.on('field:validated', function(e) {
if (e.validationResult.constructor!==Array) {
this.$element.closest('.form-group').removeClass('has-danger').addClass('has-success');
} else {
this.$element.closest('.form-group').removeClass('has-success').addClass('has-danger');
}
});
The above will listen for when fields have been validated, and, hence update the relevant div.form-group according to the Bootstrap 4 documentation to ensure that the input field gets rendered appropriately.
I have a form that has some fields.
One field is autocomplete
.
The field is filled with information from a table
$f->addField('autocomplete','idfield','Field')->setValueList( $this->api->db->dsql()
->table('items')->field('id,name')->do_getAssoc() );
I'm trying to set the focus on that field when the page loads.
I have did this
On top of the page
$p->js()->_load('seteo_foco');
And then
seteo_foco.js
$(function(){
$("select:first").focus();
})
But this does not work.
Anybody can help ?
Thanks
Try TRUE like
$this->js(true)->_load('seteo_foco'); to load js file.
But in your js code your selector is incorrect. You need to specify you unique field. I'd use something like $form->getElement('field_name')->js(true)->focus(); on the page after the form has been initialized.
I have the following field in a form:
<input type="text" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />
The form is to edit an existing record. No matter what value is in the existing record, the field fails validation and the databind becomes undefined. Some example values that exist on the records are 1, 2.5, 12.5, 99.25, 4.0. I believe every one of these should pass both the pattern and maxlength validations, but it isn't working. I've checked the model and the values are present when loading the form.
When I remove the ng-maxlength directive and just have the ng-pattern, it works fine and those values pass validation. If I remove ng-pattern and just have max-length, it fails. It also doesn't matter if the INPUT is of type text or number. If ng-maxlength is present, it fails. Browser also does not make a difference (tested Chrome, IE & Firefox). I have also verified that it is the maxlength error in the error list.
I am also using ng-maxlength with almost every other field on this particular form, and they also work just fine. And if I type the exact values listed above after form load when ng-maxlength is present validates fine at that point. But that's not a reasonable workflow to make the client type the values over again every time they load the form.
I don't understand it as I use this same pattern in other forms within the app and they work fine. I can get by with just ng-pattern on this particular field, but I would much rather figure out why, in this one case, it won't validate properly on load.
I'm using AngularJS 1.2.14, with JQuery 1.9.1.
I figured it out. It was actually the INPUT type after all. After further testing, I realized my initial test of that variation was incorrect. Changing the INPUT type to NUMBER fixed the validation issues.
<input type="number" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />