I have a save button (input button) that I have written javascript code to save the form data to the database. My jQuery .validate function doesn't run before I save the form. How can I manually execute my jQuery .validate function before I save. Here is what I am doing.
<input type="button" class="saveSubmit" name="action" value="Save" />
// Give user feedback when clicking save
$(".saveSubmit").click(function() {
if (save() == true) {
alert("Email has been saved.");
} else {
alert("Error saving email.");
};
return false;
});
// Validation
$("#emailForm").validate({
// rules here
});
Found it. I need to use $("#emailForm").valid().
Related
I have a simple form as below:
some.component.html
<form class="example-form" novalidate (ngSubmit)="onSubmit()" autocomplete="off" [formGroup]="testform">
<input type="text" formControlName="name" class="form-control" placeholder="Enter name" required/>
<app-show-errors [control]="claimform.controls.name"></app-show-errors>
<button type="submit" (click)="onSubmit()">Next</button>
</form>
some.component.ts
ngOnInit() {
this.testform= new FormGroup({
name: new FormControl('', { validators: Validators.required})
}, {updateOn: 'submit'});
}
onSubmit() {
if (this.testform.valid) {
alert('saving data');
} else {
this._validationService.validateAllFormFields(this.testform);
}
}
validationService.ts
validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
}
Reference
Problem
The form will validate on submit if left blank, but even after filling the value when I check this.testform.valid it returns false. But if I remove updateOn:'submit' on form then it validates on blur of input control and when value is entered it validates form return true. Not sure if updateOn is working fine or not or whether I've implemented this in a proper way. Could someone point me in the right direction.
in your HTML you have two calls to onSubmit() function, from submit button:
<button type="submit" (click)="onSubmit()">Next</button>
and from the form:
<form class="example-form"
ovalidate
(ngSubmit)="onSubmit()"
autocomplete="off"
[formGroup]="testform">
The first call to be triggered is the button's trigger, which actually does nothing in terms of updating your reactive form, since you set FormGroup's option to {updateOn: 'submit'}. The second call to be triggered is the form's trigger, which does actual form update.
Here is FormGroup directive config:
#Directive({
selector: '[formGroup]',
providers: [formDirectiveProvider],
host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
exportAs: 'ngForm'
})
as we can see in host property DOM form's submit (triggered by hitting ENTER while focused within form or clicking form's submit button) will call onSubmit() function:
onSubmit($event: Event): boolean {
(this as{submitted: boolean}).submitted = true;
syncPendingControls(this.form, this.directives);
this.ngSubmit.emit($event);
return false;
}
which then will call syncPendingControls() function:
export function syncPendingControls(form: FormGroup, directives: NgControl[]): void {
form._syncPendingControls();
directives.forEach(dir => {
const control = dir.control as FormControl;
if (control.updateOn === 'submit' && control._pendingChange) {
dir.viewToModelUpdate(control._pendingValue);
control._pendingChange = false;
}
});
}
which updates a model at last.
So, in your case, just remove (click)="onSubmit()" from the submit button:
<button type="submit">Next</button>
also you do not need required DOM element property on your input, since you set it using Reactive Forms API validators: Validators.required and since you set your form to novalidate which cancels HTML5 form validation.
I have a partial view that the user can preform a search in, and the search results are shown in a select box. In my main view I have a section that is supposed to show the search results after a select button is pressed. Right now when I click the select button is loads the correct information into the correct model for my main view, but the main view doesn't change. When I click refresh, the page updates correctly. How do I make the page update automatically when a button is clicked in the plugin view?
My section in the main view (Index.vbhtml) in my main app:
#Section CUInfo
Credit Union Name: #Model.CUInfo.CUName
end section
Here is my controller method in my Plugin:
Function ChangeCUInfo(strCUName As String) As ActionResult
m_hostApp.CUInfo.CUName = strCUName
m_hostApp.blnPluginRefreshButtonPressed = True
Return View("Index", m_hostApp)
End Function
I've tried to set a boolean value in the hostApp object and then in my main razor view call this function if it is true:
#code
If Model.blnPluginRefreshButtonPressed = True Then
#<script type="text/javascript">
$(function () {
window.location.reload();
});
</script>
End If
Model.blnPluginRefreshButtonPressed = False
End Code
EDIT:
JS function called when the select button is clicked:
function loadCU(CUInfo) {
strCU = CUInfo.split('|');
strCUName = strCU[0];
$.ajax({
type: "POST",
url: "/CUContractNumberPlugin/ChangeCUInfo",
data: { "strCUName": strCUName }
});
}
Form that is used in the plugin view:
#Using (Html.BeginForm("ChangeCUInfo", "CUContractNumberPlugin"))
#<div id="LogoSigSearch" style="height:300px;width:500px;position:relative;">
<span style="display:inline-block;height:20px;width:166px;position:absolute;top:35px;left:5px;">Credit Union Name</span>
<br />
#Html.TextBox("strCUName")
<input type="submit" name="LogoSigSearch$ctl02" value="Search" id="LogoSigSearch_ctl02" tabindex="3" style="width:60px;position:absolute;top:5px;left:352px;" />
<input name="LogoSigSearch$ctl05" type="button" onclick="javascript:clearSearch()" value="Clear" style="position:absolute;top:35px;left:352px;width:60px;" />
<select size="4" name="LogoSigSearch$ctl06" id="LogoSigSearch_ctl06" tabindex="5" style="height:230px;width:342px;position:absolute;top:65px;left:5px;"></select>
<input type="button" name="SelectCU" value="Select" onclick="javascript:loadCU(LogoSigSearch_ctl06.options[LogoSigSearch_ctl06.selectedIndex].value)" tabindex="4" style="width:60px;position:absolute;top:65px;left:352px;" />
</div>
End Using
Are both buttons part of a form? A button won't invoke an action without you attaching it to script or making it part of a form with an associated action.
Use a partial view to render the results of the query, even on the main page load. This simplifies your development.
Add a jQuery event handler (jQuery.on()) to watch for the button click on your main page, or if the button is returned in the partial view, just use an on ready handler in your partial and attach a button.click() event, again using jQuery.
The jQuery event handler can take care of submitting the values of the query, posting to your controller, and displaying the results. I have a number of older articles here but they are still relevant to your question and demonstrate submitting data and fetching partials.
Your client-side code will end up looking something like this:
$("#your-button").click(function () {
var fetchUrl = '#Url.Action("ActionName", "Controller")';
$.post(fetchUrl, { searchParams: $("#your-search-box").val() })
.success(function (data) {
// replace the contents of the DIV with the results. 'data'
// here has whatever you sent back from your partial view
})
.error(function (data) {
// handle the error, use a DIV with some kind of alert message etc
});
});
Hope this helps some.
I have an strongly typed view for my model and what I'd like is that when the user clicks on submit, a confirmation box pop up confirming that the user does indeed wish to submit the form, if they click cancel then it shouldn't fire the HttpPost Action for that View, is this possible?
Of course it is possible. I like to use an unobtrusive approach. Here is a simplified example:
jQuery(document).ready(function () {
jQuery('[data-confirm]').click(function (e) {
if (!confirm(jQuery(this).attr("data-confirm")))
{
e.preventDefault();
}
});
});
Then you only need to add a data-confirm attribute to your submit button for example
<input type="submit" data-confirm="are u sure?" />
Of course you can use this attribute on links, buttons, etc. you are not restricted to submit buttons only, and if you want to implement a fancier confirm dialog later than you will have to replace the code only in one place.
function doSubmit()
{
if(window.confirm("ARE YOU SURE TO PERFORM THIS ACTION"))
{
return true;
}
else return false;
}
call doSubmit() function on onsubmit event of the form,
Eg- onsubmit="return doSubmit()
you can add a simply jQuery call for that.
at the end of your view add:
<script type="text/javascript">
$("form").submit(function() {
return confirm('Are you sure?');
});
</script>
or, add a
onsubmit="return confirm('Are you sure?');"
as a new element property
I believe this can be done by overriding the submit button using jquery. Jquery .submit()
This way, when the person hits submit you can show a message and either submit it or cancel it.
I have a form + layout like so:
<form ...>
<div id="editor">
[form html]
<input type="submit" value="Submit form" />
</div>
</form>
And the following javascript:
$(function() {
var form = $('#editor').parents('form');
alert(form.length); // this alerts "1"
$(document).on('submit', 'form', function() {
alert('document form submit fired'); // this works as expected (alerts)
});
form.on('submit', function() {
alert('selected form submit fired'); // this is never alerted
});
});
This form is not loaded via ajax. When the page loads, the first dialog alerts "1". However when submitting the form, only one alert is fired -- the one that triggers submit for all forms in the document.
Why would this happen?
It does work. Something else is happening which is preventing the second alert from firing.
Your form selector is incorrect.
Try and do this
$("form").on('submit', function() {
Pretty sure this should work
Actually if nothing is being loaded through ajax or dynamically through javascript
You can just do
$("form").submit(function() {
EDIT
Scratch my above. Didn't see you set the value of form. Check out http://jsfiddle.net/s3fvM/1/. Seems to be working fine to me. both are firing and alerting.
I am using jquery-1.4.4 in struts. I had successfully used the jquery.validate plugin and validated my request form. But since it is a 3 page form, I have to give a confirm dialog box at each page to ensure users recheck their form entries.
$(document).ready(function() {
:::
$("#Form1").validate({
::
});
function onSubmitForm(){
var vconf = confirm(" You are about to submit, please recheck the the fields");
if(vconf){
return true;
}else{
return false;
}
}
});
and my submit button
<input type="submit" title="continue filling up the form" value=" Continue "
onclick= "return onSubmitForm();"/>
This first calls my confirm dialog and then does validation, which is not appropriate to first ask the user if he actually wants to continue and then stop them saying that their form is not valid.
i think so you can try this....
<script type="text/javascript">
$(document).ready(function() {
$("#Form1").validate({
submitHandler : function(form) {
if (confirm("You are about to submit, please recheck the the fields?")) {
form.submit();
}
},
rules: {
x: {
required: true,
},
y:{
required:true,
}
}
})
});
</script>
perhaps this should help you. Jquery validate onValid.
Just call the function onSubmitForm() after you submit, and submit the form using javascript.