I stumbled on an apparent incompatibility between knockoutjs and jquery mobile when it comes to form submit behavior.
Consider the following markup:
<form data-bind="submit: myKoSubmitAction">
<!-- form fields here -->
</form>
The intention is that knockout prevents server post/get and instead calls myKoSubmitAction. jqm will also prevent standard submit behavior only for jqm the reason is that the form submit is replaced by an ajax request.
So while knockout (presumably) succeeds at preventing the standard server request, it fails to prevent jqm from sending an ajax request.
I found the answer to this problem in a google group and thought it should be on SO as well. See below
You can also add data-ajax="false" to the <form> element.
See Submitting Forms.
The best solution I have been able to find is the following custom ko binding:
//This binding fixes apparent incompatibility between knockout and jqm
ko.bindingHandlers.jqmsubmit = {
init: function (el, accessor, allbindings, vm) {
ko.bindingHandlers.submit.init(el, accessor, allbindings, vm);
$(el).submit(function (e) {
// prevent the submit behavior
e.preventDefault();
e.stopPropagation();
return false;
});
}
};
To be used in the place of the standard submit ko binding:
<form data-bind="jqmsubmit: myKoSubmitAction">
<!-- form fields here -->
</form>
Related
How to determine that a Angular form is tried to submit or not to show invalid fields.
When you create a form in angular, then the form object contains a boolian property "submitted". It becomes true when user tries to submit a form.
<form #searchForm="ngForm" [ngClass]="{'FormTried':searchForm.submitted}"
(ngSubmit)="submitData(searchForm)" >
// your form fields
</form>
I used it to add a class for form tried to submit or not.
<form #empForm="ngForm" [ngClass]="{'FormTried':empForm._submitted}"
(ngSubmit)="submitData(empForm)" >
// added code here
</form>
I have used this and this works fine at my end, please try this also.
I use ngxErrors to display errors for a form control and it works great. Is there any way to get similar functionality for a form or a form group? Currently, I display a form error like this:
<div *ngIf="form.hasError('loginFailed')">
Login Failed
</div>
The bummer is, when I detect that there is a form error (e.g. after the login form is submitted) as opposed to control error, I set it like this:
this.form.setErrors({ loginFailed: true });
this.cdr.detectChanges();
Where this.cdr is an instance of ChangeDetectorRef. This is necessary because I'm using OnPush change detection strategy. So basically it's like calling $scope.$apply() from AngularJS all over again.
What I would really like to do is something more like how ngxErrors does it:
<div ngxErrors="myForm">
<div ngxError="loginFailed" [when]="['dirty', 'touched']">
The login has failed
</div>
But ngxErrors expects myForm to be a control.
This feature is not currently baked into ngxErrors, but I submitted a PR. https://github.com/UltimateAngular/ngxerrors/pull/18
The working syntax is a slight modification of the above:
<div ngxErrors>
<div ngxError="loginFailed" [when]="['dirty', 'touched']">
The login has failed
</div>
</div>
I learned that you do not have to tell child components the form, the FormGroupDirective is available to children automatically.
See this library https://www.npmjs.com/package/ng-error-messages for show error messages based on validation rules:
<input placeholder="Texto:" formControlName="text">
<div errorMessage="text" alias="Super Texto" ></div>
Is it possible to build and validate a simple html form (not a CActiveForm or CHtml widget form) with yii validate() method.If yes, please give suitable and simple example.I can't find anything about this on web,
Thanks in advance
I think yes, try to sent it like Model[field] with the POST method. And disable csrf token.
yes you can use validation without help of CActiveForm and Chtml
use in your html tag name like Model[attribute]
<input type="text" name="User[full_name]">
in your controller function disabled _csrf token
function actionSave() {
$this->enableCsrfValidation = false;
<--here your code
-->
}
I have some html that uses JS to submit a form:
<form onsubmit="doform();return false;">
In the test script I'm doing the following based on what I found here on SO and in
the WWW::Selenium docs.
$sel->get_eval("this.browserbot.getUserWindow().doform()");
The normal form submission works fine but it does not work in the selenium code.
If I scoop the JS out of the js file and make a string in the test file it works fine.
my $js = "{ //do some javascript stuff here; }";
$sel->get_eval( $js ); // this works.
I'm under the impression that that is not the correct way to do that though. It's certainly
not desirable, especially when the function calls other functions.
What is the correct form for using selenium to submit a form?
There is a method to submit the form (which should also fire the onsubmit javascript).
From WWW::Selenium:
$sel->submit($form_locator)
Will submit the specified form. $form_locator is an element locator for the form you want to submit.
using asp.net mvc2, Data Annotations,
MicrosoftAjax.js,MicrosoftMvcValidation.js,
jquery for ajax
I have contact form and i am using Data Annotations for the ContactFormModel.
I add this line <% Html.EnableClientValidation(); %> to top of the form.
When i click the submit button client validation works perfectly. Now i have changed my mind and want to post the form with jQuery.Ajax.
This time i want to accomplish this.
Click submit button.
MicrosoftMVCValidation does the client validation and renders the errors on the clientside.
If Model is valid i meant if the validation passed i want my jQuery ajax to get involved.
But when i clicked the submit button both ajax post and mvc client validation works.
How can i get the things in right order.
1.Mvc Client validation
2. Then jQuery.Ajax Post.
var myForm = $("#MainForm");
var formContext = myForm[0]['__MVC_FormValidation'];
var errors;
if (formContext) {
// validate the form
errors = formContext.validate("submit");
}
if (!formContext || errors.length == 0) {
// no errors so submit to server
...
}