I am using Kendo DatePicker and other Kendo widgets in my forms.
By changing an input of those widgets to an invalid value,
the form is beeing prevented from submit.
It appears that there is some kind of automatic validation, that is beeing triggered before the form is beeing submitted.
How can I e.g. add an event to this validation?
I want to stop my button spinners when this happens.
I thought of attaching something like this:
onPreventInValidFormSubmit(){
Ladda.stopAll();
}
any ideas?
Update:
<div class="form-horizontal" style="margin-top: 20px; margin-bottom: 10px;">
<div class="form-group" style="margin-left: 0; margin-right: 0">
<div class="control-label col-sm-2 sl-internal-data">
#Html.LabelFor(m => m.CreatedAt)
</div>
<div class="col-sm-4">
#Html.Kendo().DateTimePickerFor(m => m.CreatedAt).Enable(true)
#Html.ValidationMessageFor(x => x.CreatedAt)
</div>
</div>
</div>
which is contained in Ajax.BeginForm with a submit button
You could attach to the validateInput event, like this:
<form>
<input name="username" required /> <br />
<button id="save">Save</button>
</form>
<script>
// attach a validator to the container
$("form").kendoValidator({
validateInput: function(e) {
if(!e.valid){
Ladda.stopAll();
}
}
});
</script>
There is also a validate event, which fires only when the form is submitted and not after each field is changed. You can read more about these in the events section of this documentation article: http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#events-validateInput
Related
I have my chat and I dont want people to send empty message so I would like that my input become required. Thanks for your help.
I tried to put "required='required'" in the input line, I also tried veeValidate but it broke my chat when I use it, I also tried to put "Required = true" in Props and data but without a good result
This is ChatForm.vue
<template>
<div class="input-group" >
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" #keyup.enter="sendMessage">
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat" #click="sendMessage">
✓
</button>
</span>
</div>
</template>
<script>
export default {
props: ['user'],
data() {
return {
newMessage: '',
}
},
methods: {
sendMessage() {
this.$emit('messagesent', {
user: this.user,
message: this.newMessage
});
setTimeout(function() {
const messages = document.getElementById('mess_cont');
messages.scrollTop = messages.scrollHeight;
}, 200);
this.newMessage = '';
}
}
}
</script>
And this is my form in the app.blade.php
<div id="app" class="container-chat">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div class="col-md-12 col-md-offset-2">
<div class="panel-body panel-content" id="mess_cont">
<chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
</div>
<div class="panel-footer">
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}"
></chat-form>
</div>
</div>
</div>
</div>
</div>
Try to change your ChatForm.vue like this:
<template>
<form #submit.prevent="sendMessage">
<div class="input-group" >
<input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Ecrire..." v-model="newMessage" required>
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
✓
</button>
</span>
</div>
</template>
You are not treating the input in the correct way, the input which is required needs to be inside a form and the required keyword will prevent the form submission if the input field is empty.
There are a few things I would do differently.
1/ Wrap your chat form in a tag, and execute the sendMessage() method on submit. This will give your users a nicer experience, as they can just to submit the message.
2/ Convert the button into a submit button so it triggers the form.submit event.
3/ You can easily disable the button by checking whether newMessage has contents. I don't think you need vee validate or anything else to achieve this; for something as simple as a chat form, your user doesn't need much more feedback than seeing a disabled button to realise (s)he needs to write something first.
4/ in the addMessage method you can just check the contents of newMessage and not do anything when it's empty. This is perfectly fine because you already hinted the user by disabling the button too.
I think this is a subtle way where you guide your user, but don't overdo it.
Please add name attributes to all of your form elements. Some of the element in my form had name attribute and some didn't. Element which had name attributes worked correctly but the one's which didn't had name failed.
I am using form validator plugin to validate my forms.
It is working properly if I am not submitting data using jQuery post method.
On using jQuery post it is not validating the form on submit.
My code is
<form action="UpdatedProfile" method="post" name="updateprofile" id="UpdatedProfile" class="form-horizontal">
<div class=" form-group ">
<div class="col-lg-2">
<label>First Name</label>
</div>
<div class="col-lg-4">
<input type="text" name="fname" cssClass="form-control" data-validation="required" data-validation-error-msg="First Name is required"/>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$.validate();
$(document).on('click', '#submit', function (event) {
event.preventDefault();
console.log($('#UpdatedBasicProfile').serialize());
$.post("Updated", $('#UpdatedProfile').serialize(), function (data)
{....});
});
});
</script>
How to achieve this?
put a submit button in the form and define validation rule in js like
$('#frm_registration').validate({
rules:
{
fname: required
},
messages:
{
fname : 'Please enter name'
}
});
or if the button is of type button then initiate validation on its click like:
$('#btn').click(function(){
$('#frm_registration').valid(); // will initiate the validation
})
If the validator is working when clicked on submit button, you could trigger a click event on the button rather then listening the document for any clicks and if the target is the given button.
I have a problem with my input fields in my modal view.
When I take a change in the input fields then it is updating the table list but when I leave the page and go back to this page with the table list then die changes are disappeared.
This is my modal view:
<form class="form-horizontal" name="editForm" novalidate>
<div class="modal-body">
<div class="form-group-sm has-feedback">
<label class="control-label">Firstname</label>
<input type="text"
class="form-control"
name="Fname"
ng-model="selected.fname"
ng-model-options="{updateOn: 'updateItem'}"
ng-required="true"
/>
</div>
</div>
//the same input field for lastname
...
<div class="modal-footer">
<button class="btn btn-default" ng-click="createItem(selected)" type="submit">Erstellen</button>
<button class="btn btn-default" ng-click="updateItem(selected)"> Ändern</button>
<button class="btn btn-default" ng-click="cancel()">Abbrechen</button>
</div>
</form>
Modal Ctrl:
$scope.cancel = function () {
$scope.editForm.$rollbackViewValue();
$modalInstance.dismiss('cancel');
}
$scope.updateItem = function (updateItem) {
CrudService.update(updateItem);
$scope.ok();
}
Crud Service:
...
update: function (updateItem) {
updateItem.$update();
},
...
I have only seen examples of $rollbackViewValue() with one input field and the code: $scope.myForm.inputName.$rollbackViewValue() but I have more than one input fields?
you should call $rollbackViewValue() through the form name:
editForm.$rollbackViewValue()
call it in your template:
{{editForm.$rollbackViewValue.toString()}}
and you will see how it actually works:
function () {
forEach(controls, function(control) {
control.$rollbackViewValue();
});
}
A little late but for others reference (I came across this looking for another issue with $rollbackViewValue).
Using $rollbackViewValue in controller: to use $scope to reference the form from the controller, you have to use the ng-form attribute on a child element of the form (like for instance the form-group div in your example).
That makes $scope.editForm.$rollbackViewValue() available in the controller and resets the entire form.
For cases where buttons are inside the form, using ng-submit and ng-model-options="{ updateOn: 'submit' }" on input fields, then adding 'type=button' attribute to cancel button element (so submit isn't triggered) is a quick solution.
Example:
https://embed.plnkr.co/IQ4vvutC3tcHvVBH0821/
I've downloaded a bootstrap template which has 1 email form in it. I'm trying to add a second form with other fields on the same page. When I click the submit button in my second form, the values of the original form are always used.
Here is my html:
// second form added by me
<form name="sentMessage2" id="contactForm2" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success">Send</button>
</div>
</div>
</form>
// original form
<form name="sentMessage" id="contactForm" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success">Send</button>
</div>
</div>
</form>
And here is my javascript file contact_me.js (not adjusted):
$(function() {
$("input,textarea").jqBootstrapValidation({
// I dont understand how the form calls this method. There is no reference to the form's name/id
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#emaill").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name;
// when I debug here, I always see the values from the original form
How can I create a second form that sends an email?
Change the id properties on your second form and the jquery selectors. Eg. rename 'email' to 'email1', and such, as you did with the form.
A better solution would be to stop using id-s at all, and switch to "name" attributes.
Set id and class for each button
// second form added by me
<form name="sentMessage2" id="contactForm2" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button id"btn2" type="submit" class="btnSend btn btn-success">Send</button>
</div>
</div>
</form>
// original form
<form name="sentMessage" id="contactForm" novalidate>
// input elements like for example #name
<div class="row">
<div class="form-group col-xs-12">
<button id"btn1" type="submit" class="btnSend btn btn-success">Send</button>
</div>
</div>
</form>
Your jquery code will be like this
$( document ).ready(function() {
$(".btnSend ").click(function() {
var id = $(this).attr("id");
if(id==="btn1"){
$( "#contactForm" ).submit();
}
if(id==="btn2"){
$( "#contactForm2" ).submit();
}
});
});
I didnt test but it should work.
I'm working with MVC 3, javascript and jQuery.
I've got a hidden button which click() function needs to be called from javascript.
This works great on every browser except IE9.
$('#fakeSubmitBt').click(function () {
$('#fileUplSubmitBt').click();
});
Here, fileUplSubmitBt is the hidden button and fakeSubmitBt is the visible button which I need to click instead.
I noticed that if a call three times
$('#fileUplSubmitBt').click();
then the form is submitted, but in the backend the elements of the form are not recognized.
UPDATE:
thanks to the hints given by Ricardo and Jay, I tried to use trigger('click') but also this path failed.
In the following I post the code that is shaming me (it's MVC3 using Razor):
<script type="text/javascript">
function s2cPanelReady() {
$('#fakeBrowseBt').click(function () {
$('#fileUplRadio').prop("checked", true);
$('#gravatarRadio').prop('checked', false);
$('#realFileUpload').click();
});
$('#fakeSubmitBt').click(function () {
if ($('#gravatarRadio').prop("checked")) {
$('#grvatarSubmitBt').click();
} else if ($('#fileUplRadio').prop("checked")) {
$('#fileUplSubmitBt').trigger('click');
}
});
}
</script>
<div class="inputForm">
<div class="inputField">
<div class="userPicLargeFrame">
<img src="/Images/Get?id=#Model.ID&size=40" class="userPicLarge" />
</div>
</div>
#using (Html.BeginForm("ChangePicture", "User"))
{
<div class="inputField">
<input type="radio" id="gravatarRadio" />
<span class="inputLabel">Gravatar:</span>
#Html.EditorFor(model => model.Preferences.GravatarEmail)
#Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
</div>
<input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}
#using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{
<div class="inputField">
<input type="radio" id="fileUplRadio" />
<span class="inputLabel">Save your own pic:</span>
<span class="inputLabel">
<span style="display:inline-block; position:relative;">
<input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
<span style="display:inline-block; position:absolute; top:0px; left:0px;">
<input id="fakePathBox" type="text" value="" readonly />
<input id="fakeBrowseBt" type="button" value="..."/>
</span>
</span>
</span>
<input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
</div>
}
<div class="inputField">
<span class="inputLabel">
<input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
</span>
</div>
</div>
UPDATE N.2: I tried to remove all javascript stuff, and simply put the file upload HTML tag with a simple submit button: nor in this case on IE9 I'm able to submit the form!!
Sometimes it runs, sometimes it is not fired at the first click, but only at the second click (and in this case the submitted form hasn't got the selected file, so server-side this results in an error...), sometimes it simply doesn't fire the submit button, no matters how many click I do.
This issue starts to make me crazy....
Any other hint?
Thank you very much!
Best
cghersi
I've had a similar problem and ended up just transforming the button into an anchor (<a>) and invoked the jquery-ui function $.button()
NOTE: the jquery ui is required http://jqueryui.com/
That way the link still looked like a button and the $.click() event worked.
html
<div class="input">
Submit
</div>
jquery
$("#emulate-button").button();
//Set event when clicked
$("#emulate-button").click(function () {
//.... your logic here
});
Like Ricardo said, you need to use trigger: http://jsfiddle.net/5hgsW/1/
If the $('#fileUplSubmitBt').click event wasn't defined in JQuery, the .click() trigger may not work.
Put everything from the $('#fileUplSubmitBt').click event inside a function then bind it in the $('#fakeSubmitBt').click and $('#fileUplSubmitBt').click events.