I want the validation for kendo AutoComplete when user does not select any value from AutoComplete Value that is populated.
For Little Bit background say I do have two controls one as Kendo AutoComplete and other is Input box if user types something in the AutoComplete the values is populated and he does not select any value and switch to next control it must give a validation message that please select the value from the AutoComplete.
and Also if the user type any string in the AutoComplete and Switch to next control it must also give the validation that "hey,this value is not in the AutoComplete" so that it must not save any other data other than AutoComplete datas that is being Populated.
Heres how your auto complete is defined
#(Html.Kendo().AutoComplete()
.Name("countries")
// etc.
On submit button click event
<script>
$("#btnSubmit").click(function(){
var autoCompleteValue = $("#countries").val();
if (autoCompleteValue == "" || autoCompleteValue == null){
return false; //cancels submit action
}
// else let submit go through
});
</script>
The null check is probably useless, cuz if it doesn't have a value it's usually equal to ""
The .val() solution did not work for me, because the .val() value of the control is still the text I entered (custom text, not any of the AutoComplete values), and that's wrong.
Solution is in preventing the custom input of Kendo AutoComplete. See this link:
Kendo UI - Prevent Custom User Input in the AutoComplete
Related
i have a field ProductID and another field ProductName.I would like a validation where if product ID is entered and product type is not selected it should alert user to select product Name (combo box) on the submit button click.
What will be the appropriate way to do it? I do not wish to write any script hence cannot use custom validator.
how else can i write it?
i am using ASP.NET C#.
Thanks
You can use jQuery to do this very easily. Just wire a click event handler on your submit button. Take a look at this fiddle -
http://jsfiddle.net/8efopLff/1/
JQuery code
$("#btn").click(function(){
if($("#field1").val() != "" && $("#field2").val() == "")
{
alert("Please select field 2");
}
return false;
});
I have a ASP.Net gridview and in itemTemplete I have textbox for input purpose. The problem is some textbox is for numeric input and other for Character and some accept Mobile no and 1 row is for IP address.
Now i want to validate rows as per Row in gridview?
is it possible if possible then how ?
here im giving an example.Not an exact answer.So try to understand the logic.Here im giving how to validate phno and only alphabets in name.remaining you can get, like the same way.
Because of dynamic generation of textboxes we cant create validations on it.So i use "javascript"
First you need to click "View Page source"(Right click on browser page).In that we can see the "Id"s of dynamically generated textboxes.here i take two textboxes for phno and name in gridview.i get their ids by seeing their html.(Right click on browser->view page source).i get their ids like "GridView1_TextBox1_0" for name"GridView1_TextBox1_1" for phone.By using ids i create validation using Javascript.Write the below code in Head Section of Page.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
function validate() {
var phno = document.getElementById("GridView1_TextBox1_1").value;
var namechar = document.getElementById("GridView1_TextBox1_0").value;
var phoneno = /^\d{10}$/;
var name = /^[a-zA-Z]+$/;
if (!namechar.match(name)) {
alert("please enter alphabets only");
return false;
}
if(!phno.match(phoneno))
{
alert("please enter valid phno");
return false;
}
}
</script>
In this way i validate textboxes which are generated dynamically.once again its not exact answer.its a logic by using javascript.
Limitation:
Hence Javascript is client side technology.if user disable the javascript.it not works.
I have a frame with several radio buttons where the user is supposed to select the "Category" that his Occupation falls into and then unconditionally also specify his occupation.
If the user selects "Retired", the requirement is to prefill "Retired" in the "Specify Occupation" text box and to disable it to prevent it from being changed. The Specify Occupation text box should also no longer be a tab stop. If the user selects a radio button other than Retired the Specify Occupation text box should be enabled and once again and the Specify Occupation text box should once again be in the normal tab sequence.
Originally, I was setting and clearing the disabled property on the Specify occupation textbox, then I found out that, upon submitting the form, disabled fields are excluded from the submit and the REQUIRED validator on the Specify Occupation textbox was being raised because the textbox was being blanked out.
What is the best way to solve this? My approach below was to mimic a disabled text box by setting/resetting the readonly attribute on the text box and changing the background color to make it appear disabled. (I suppose I should be changing the forecolor instead of teh background color). Nevertheless, my code to make the textbox readonly and to reset it doesn't appear to be working.
function OccupationOnClick(sender) {
debugger;
var optOccupationRetired = document.getElementById("<%= optOccupationRetired.ClientId %>");
var txtSpecifyOccupation = document.getElementById("<%= txtSpecifyOccupation.ClientId %>");
var optOccupationOther = document.getElementById("<%= optOccupationOther.ClientId %>");
if (sender == optOccupationRetired) {
txtSpecifyOccupation.value = "Retired"
txtSpecifyOccupation.readonly = "readonly";
txtSpecifyOccupation.style.backgroundColor = "#E0E0E0";
txtSpecifyOccupation.tabIndex = -1;
}
else {
if (txtSpecifyOccupation.value == "Retired")
txtSpecifyOccupation.value = "";
txtSpecifyOccupation.style.backgroundColor = "#FFFFFF";
txtSpecifyOccupation.readonly = "";
txtSpecifyOccupation.tabIndex = 0;
}
}
Can someone provide a suggestion to me on the best way to handle this scenario and provide a tweek to the code above to fix the setting/resetting on the readonly property?
I would use jQuery instead it's super easy to implement...
To set the textbox as readonly...
$("#myTxtID").attr('readonly', 'readonly');
To set the textbox as not readonly
$("#myTxtID").removeAttr('readonly');
I recently had to do the same thing. Here's how I solved it.
go back to using the disabled property rather than readonly.
replace the RequiredFieldValidator with a CustomValidator. in your client and server validation functions, determine if you need to check the text input based on the condition of the Retired radio button. then check for input in the text box if you need to. (on the js side you can check the disabled property on the textbox itself to save yourself a step).
on the server side you should double check the radio button selection, and if "Retired" is selected, you should make sure that "Occupation" value is actually "Retired". this gets you around the issue of not getting a value from a disabled field, and you should be doing it anyway (never trust the user and all that).
I have sort of a table with a radio-button column. I managed to make radio-button column work dynamically inserting into a cell (div if matter). But, on postback innerHtml hasn't been updated with "checked" attribute.
Could you give me an idea how can I find out (on the server) if radio-button has been checked?
More info: This is on user control inside update panel.
This would be good post on my topic, still doesn't help
Any reason you cannot use a standard asp:RadioButton and use javascript to ensure it is mutually exclusive. I have done this before by adding a custom attribute to the radiobutton and then using a js function to uncheck all items with that attribute and then check the selected one. This works around the IE issue which prevents the groupname attribute from working on radioboxes that are in different containers.
radioButton.InputAttributes.Add("ClientGroupName", "grpRadioList");
radioButton.InputAttributes.Add("onclick",
string.Format(
"javascript:radiobuttonToggle('{0}','ClientGroupName','grpRadioList');"
,radioButton.ClientID));
and use the following JS to uncheck all radios and then check the one you want.
Note i used InputAttributes instead of Attributes as the radiobutton is wrapped inside a span tag so InputAttributes is for items added to the actual input control rather than the span.
function radiobuttonToggle(selectedRB, attribName, attribValue)
{
var objRadio = document.getElementById(selectedRB);
for(i = 0; i < document.forms[0].elements.length; i++)
{
elm = document.forms[0].elements[i];
if (elm.type == 'radio')
{
if(elm.getAttribute(attribName) == attribValue)
elm.checked = false;
}
}
objRadio.checked = true;
}
You can then expose radioButton.Checked as a property in your CS file and reuse this as a control.
Check Form.Request("radio-name") != null
You only get a non-null value when it's been checked.
Make sure your page elements are being rebuilt correctly on postback. Any binding process that inserted the radio buttons the first time around will have to be re-run before you can access them the second time.
Here is a working example, first I add radios to my webform by the method you linked :
function addRadio()
{
try{
rdo = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
rdo = document.createElement('input');
}
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');
document.getElementById('container').appendChild(rdo);
}
Then at code behind I used only the code below to get the radio's value :
string value = Request["fldID"];
So, be sure you're trying to get the name of the radio buttons at server side. You should use name attribute at server side, not id.
I have a jQuery Autocomplete field on an ASP.Net Webform and everything has been working great until now. I also have a DropDownList that I have a need to fire onSelectedIndexChanged with AutoPostBack.
When I changed my code to do the AutoPostBack, the text field that has the jQuery AutoComplete on it comes back blank. However, if I look at the source of the page, the text is in the text field. If I now post the form, the page will send back a blank field. My Google-Fu is weak on this one, as I could not come up with any workaround for it.
Has anyone had any issues like this with the Autocomplete field getting blanked out on an AutoPostBack, and how did you get around it?
I can post code if it's really necessary, but I'd need to sanitize a lot of it before I could due to company policy.
How is the autocomplete field being initialized? Is it being set to empty string either on page load from server or by the autocomplete jQuery plugin on document.ready?
If the source code for the plug-in is setting the textbox to empty string on document.ready then try the following:
// Store current textbox value in a var
var temp = $('#mytextbox').val();
// Initialize the autocomplete plugin (winging it on the syntax)
$('#mytextbox').autocomplete();
// Reset the value of the textbox.
$('#mytextbox').val(temp);
If you use jQuery Autocomplete plugin 1.1,
* Revision: $Id: jquery.autocomplete.js 15 2009-08-22 10:30:27Z joern.zaefferer $
Add "autoPostBackSelection: false," in the options Ex:
$.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",
loadingClass: "ac_loading",
minChars: 1,
delay: 400,
autoPostBackSelection: false,
...
After, add this just before the "return true; at the end of the "selectCurrent() function.
if (options.autoPostBackSelection == true) {
__doPostBack($input.id, "");
}
Example:
function selectCurrent() {
...
if (options.autoPostBackSelection ==
true) {
__doPostBack($input.id, "");
}
return true;
}