Kendo Autocomplete must select Validation - javascript

I have a Kendo AutoComplete which populated when we type something in it.Now I want to validate this AutoComplete when user dont select the Option from Populated fields.
e.g If I have a list of Countries and when i type a first 3 char then autocomplte pops up.Now User must select the any field from pop ups.I mean i want to force the user to select the Countries.My code so far goes as follows:
#(Html.Kendo().AutoComplete()
.Name("Account")
.DataTextField("AccountName")
.Filter("contains")
.MinLength(3)
.Template("#=data.AccountName#")
.Events(events => events.Select("AccountSelect").Change("ChangeEntity"))
.HtmlAttributes(new { style = "width: 240px;" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetTransaction123", "Cashbox");
})
.ServerFiltering(true);
})
)
I want to write some code on change event of this Auto Complete
function ChangeEntity(e)
{
$(document).ready(function () {
$("#transaction").validate({
success: "valid",
submitHandler: function () { alert("Submitted!") }
})
});
}

You can use the Select and Change events to test if the user has selected or typed a valid option. If text that is entered is not in the list, this will blank it out.
#(Html.Kendo().AutoComplete()
.Name("Account")
.DataTextField("AccountName")
.Filter(FilterType.Contains)
.HtmlAttributes(new { style = "width: 100%" })
.Suggest(true)
.HighlightFirst(true)
.MinLength(3)
.Events(e => e.Select("accountSelect"))
.Events(e => e.Change("accountChange"))
.DataSource(source => source
.Read(read =>
read.Action("GetTransaction123", "Cashbox")
)
.ServerFiltering(true)
)
)
<script>
var accountIsValid = false;
// This was a valid account! Set the accountIsValid flag.
function accountSelect(e) {
accountIsValid = true;
}
// Clear the account field if the choice was not valid
function accountChange(e) {
if (!accountIsValid) {
this.value('');
}
// Reset the accountIsValid flag for next run
accountIsValid = false;
}
</script>

From my understanding, you want to give validation on AutoComplete while submitting form
If this is a scenario then you may use form validation, some thing like below
<div id="yourForm">
#(Html.Kendo().AutoComplete().Name("Account")......
<span class="k-invalid-msg" data-for="Account"></span>
</div>
<script>
$("#yourForm").kendoValidator({
rules: {
customRule1: function(input) {
if (input.is("[name=Account]")) {
return input.val() === "";
}
return true;
}
},
messages: {
customRule1: "Account field is required"
}
});
</script>

Related

How to solve blur and submit event simultaneous in angular

I have text box in my page, which i can enter 9 digit number. Onblur I am validating like the entered number is valid or not using API call, If service returns failure it will clear the text box with red border and form will be invalid. The event conflict happening between OnBlur and Submit. Submit service will call only the form is valid otherwise it will show toaster like enter mandatory filed.
If the text field focused and directly if I click on submit button, both event calling simultaneously and it is clearing the number field OnBlur as well as the service is calling.
Please can you help me to resolve this conflicts.
file.html
<form class="contact-form" #create="ngForm">
<div class="controls">
<input NumberOnly="true" type="text" id="num" [ngClass]="{'red-border-class': ((showErrorFlag == true && numberField.errors) || (showErrorFlag == true && numberField.errors && (numberField.dirty || numberField.touched)))}"
[disabled]="disableRotaDetailFields" [(ngModel)]="number"
class="floatLabel" name="ownership" required #numberField="ngModel" (blur)="validatenumber(number)" [maxLength]="einLength">
<label for="ein">number<sup>*</sup></label>
</div>
<button (click)="SaveData(create)">Save</button>
</form>
file.ts
public validatenumber(number) {
let reqObj = {
"ownership": number
}
this.calloutService.validateOwnerEin(reqObj)
.pipe(takeUntil(this.unsubscribe))
.subscribe((data) => {
}, (err) => {
if (err.status == 404) {
this.number = "";
}
this.toastr.error(err.overriddenMessage);
})
}
SaveData(){
if (!formFlag.valid ) {
this.showErrorFlag = true;
this.toastr.error('Please fill all the mandatory fields');
}else {
this.calloutService.createData(this.data)
.pipe(takeUntil(this.unsubscribe))
.subscribe(data => {
this.showSpinnerFlag = false;
let response = data;
if (data) {
this.toastr.success("Rota created successfully.");
} else {
this.toastr.error("Could not save.");
}
}, err => {
this.showSpinnerFlag = false;
this.toastr.error(err.overriddenMessage);
})
}
}

datepicker not working on first load, jquery

I am working with datepicker jquery for 2 input "from" and "to" filter.
I want to make it required if one of the filters (from/to) has been selected. And if the user doesn't want to use the date filter, I want to remove the required attribute.
However, after I select a date in my "from" input, the action is not affected on first submit.
Somehow the "from" input didn't recognize value from datepicker on the first load.
Anyone know why it can't work on the first submit?
here is the code for jquery:
$(document).ready(function () {
if ($('#to').val().length == 0 && $('#from').val().length == 0) {
$('#from').removeAttr('required');
$('#to').removeAttr('required');
}
else if ($('#to').val().length > 0 ) {
$('#from').attr('required');
}
else if ($('#from').val().length > 0) {
$('#to').attr('required');
}
});
for the input from and to, I set it required by default.
#Html.TextBoxFor(modelitem => Model.startdate, new { #class = "datepicker form-control" ,#placeholder = "Select From Date" , #id="from" , #required = "required" })
#Html.TextBoxFor(modelitem => Model.finishdate, new { #class = "datepicker form-control", #placeholder = "Select To Date" , #id = "to" , #required = "required" })
Please let me know the problem!
try to remove it inside the document.ready function like
<script>
if ($('#to').val().length == 0 && $('#from').val().length == 0) {
$('#from').removeAttr('required');
$('#to').removeAttr('required');
}
else if ($('#to').val().length > 0 ) {
$('#from').attr('required');
}
else if ($('#from').val().length > 0) {
$('#to').attr('required');
}
</script>
or use:
Alert("this is want to know on first run")
inside your if else statement
Addition to:
Right click the page = > console menu on first run and check some errors or any jquery is running or not.

CheckBoxFor inside a loop -- On client, discover which box changed, and if it was checked or unchecked

I have a CheckBoxFor inside a loop....
#for (int i = 0; i < Model.Roles.Count; i++)
{
... Some hidden fields ...
<div>
<label class="control-label">
#Html.CheckBoxFor(m => Model.Roles[i].Selected, new { #class = "ModelCheckBox" })
#Model.Roles[i].Name
</label>
</div>
}
And then this:
$('.ModelCheckBox').change(function (e) {
alert("you changed a role");
});
The alert pops up just fine, but what I need to know is what box changed, and if it was checked or unchecked.
In Chrome debug I put a breakpoint so I could look at the contents of e, but it doesn't seem to contain any data about which box was checked.
you can get which checkbox change simply use e.target or this.
Example
$('.ModelCheckBox').change(function (e) {
var target=this;
//var target=e.target; // both are same.
if ($(target).is(':checked')) {
alert("checked");
}else{
alert("unchecked");
}
});
Got it. In the view, change this:
#Html.CheckBoxFor(m => Model.Roles[i].Selected, new { #class = "ModelCheckBox" })
to this:
#Html.CheckBoxFor(m => Model.Roles[i].Selected, new { #class = "ModelCheckBox", #data_role = Model.Roles[i].Name })
And then once we have the data attribute:
$('.ModelCheckBox').change(function (e, data) {
alert($(this).data('role') + " " + e.target.checked);
});

Preserve the hidden or visible state of initially hidden textbox on postback in mvc application

Given below is my script.My problem is I have a textbox which is hidden and is diplayed only when we select "other" from dropdownlist.On display when we enter a value after post back that value gets preserved but that textbox becomes invisible.on postback dropdown list value is however preserved and shown as "others" and only when I select someother value of dropdown and then again change it to "other" then textbox along with text gets displayed..how can I preserve that hidden or visible state of it on postback?
<script type="text/javascript">
$(document).ready(function () {
$('#SelectedCategoryId').change(function () {
if ($('#SelectedCategoryId').val() === '5') {
$('#other').show(1000);
$('#other').change(function () {
var SelectedCategory = $('#other').val().toString();
$('#hiddenId').val(SelectedCategory);
});
}
else {
$('#other').hide(1000);
var SelectedCategory = $('#SelectedCategoryId option:selected').text();
$('#hiddenId').val(SelectedCategory);
}
});
});
</script>
My View
<div id="dropdown" class="form-control dropdown">
#Html.ValidationMessageFor(m => m.SelectedCategoryId, "*")
#Html.LabelFor(m => m.Category, "Department :", new { style = "display:inline;" })
#Html.DropDownListFor(m => m.SelectedCategoryId, new SelectList(Model.Category, "Value", "Text"), "SelectCategory", new { id = "SelectedCategoryId"})
#Html.ValidationMessageFor(m => m.Other, "*")
#Html.TextBoxFor(m => m.Other, new { id = "other", #class = "other" ,style = "display: none;" })
#Html.HiddenFor(m => m.SelectedCategory, new { id = "hiddenId" })
</div>
that's becaue you only check for the value of the select on "change" event. That doesn't happen when you load the page. Do it like that:
function toggleHidden() { //that's your code in a function
if ($('#SelectedCategoryId').val() === '5') {
$('#other').show(1000);
$('#other').change(function () {
var SelectedCategory = $('#other').val().toString();
$('#hiddenId').val(SelectedCategory);
});
}
else {
$('#other').hide(1000);
var SelectedCategory = $('#SelectedCategoryId option:selected').text();
$('#hiddenId').val(SelectedCategory);
}
}
$(document).ready(function () {
toggleHidden(); //execute the toggle on load
$('#SelectedCategoryId').change(toggleHidden); //execute the toggle on change
});

tinyMCE jQuery form validation

I'm trying to use tinymce's getContent() to make a custom validation rule, how can I do this with jquery validation? I need to apply the rule to a textarea formatted with tinymce.
Validation: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
$("#element").click( function(e) {
console.log(tinyMCE.activeEditor.getContent());
$("#someForm").validate({
rules: {
title: {
required: true
}
}
});
});
I'm thinking of just using a little bit of javascript with getContent() because it looks like there's just as much effort creating a workaround to get jquery validation working with tinymce. Thoughts on possible solutions?
The following stackoverflow questions should help you on that issue:
validating multiple TinyMCE Editor
Jquery validation form with TinyMCE field who gives no error by empty value
Hi if your are not getting client side validation on form submit time when you are with tinymce try this code
suppose your have two html editor 1 is txtAboutCompanyand 2 is txtProductinfo
this is client side code
<div class="divclass">
#Html.LabelFor(model => model.txtAboutCompany, new { #class = "required" })
#Html.EditorFor(model => model.txtAboutCompany)
<span class="field-validation-error" id="AC" style="margin:9px 0 0 157px;"></span>
</div>
this is jquery
$("#BusinessProfile").click(function () {
var aboutC = $("#txtAboutCompany").val()
var pinfo = $("#txtProductinfo").val();
if (aboutC == "" && pinfo == "") {
$("#AC").append("").val("").html("Please enter about company")
$("#PI").append("").val("").html("Please enter product information")
$("#bpform").valid();
return false;
} else if (aboutC == "") {
$("#PI").append("").val("").html("")
$("#AC").append("").val("").html("Please enter about company")
$("#txtAboutCompany").focus();
$("#bpform").valid();
return false;
} else if (pinfo == "") {
$("#AC").append("").val("").html("")
$("#PI").append("").val("").html("Please enter product information")
$("#txtProductinfo").focus();
$("#bpform").valid();
return false;
}
else {
$("#AC").append("").val("").html("");
$("#PI").append("").val("").html("");
//return true;
$("#bpform").validate();
}
});
you can get your all required validation on form submit time
I know this is not proper way but you can do it .
function tinymceValidation() {
var content = tinyMCE.activeEditor.getContent();
if (content === "" || content === null) {
$("#questionValid").html("<span>Please enter question statement</span>");
} else {
$("#questionValid").html("");
}
}
tinymce.activeEditor.on('keyup', function (e) {
debugger;
tinymceValidation();
});
$(form).submit(function (e) {
tinymceValidation();
});

Categories