I want to prevent open calendar control on save button at time of validation fire , I am not able to find how can I prevent It
I have one calendar control in form , select date validation fire on save button after validation it will direct focus on calendar control and open calendar automatically , business don't want to open calendar control
HTML
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="form-group datepicker">
<label>Project Start Date </label>
<asp:TextBox ID="ProjectStartDate" TabIndex="27" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
<asp:HiddenField ID="hdnProjectStartDate" runat="server" Value="" />
</div>
</div>
I want to prevent open calendar open on save button
let me know if any solution over there
Thank you
I have solve this issue to change in formValidation.JS
In this file there is one function
// Determined the first invalid field which will be focused on automatically
var ns = this._namespace;
for (var i = 0; i < this.$invalidFields.length; i++) {
var $field = this.$invalidFields.eq(i),
autoFocus = this.isOptionEnabled($field.attr('data-' + ns + '-field'), 'autoFocus');
if (autoFocus) {
// Focus the field
//$field.focus();
return false;
break;
}
}
On validation it will auto focus that element & after focus calendar control will
open automatically because of focus
Comment this line for prevent focus on calendar control
$field.focus();
Thank you !!
What calendar or date picker control are you using? jQuery UI, Telerik AJAX, Control Toolkit AJAX, Kendo?
For a general ASP.NET validation scenario, the textbox won't be focused automatically. You will need to set the following property to True explicitly do to that:
SetFocusOnError="true"
<asp:TextBox runat="server" ID="ProjectStartDate"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="* Required"
ForeColor="Red" ControlToValidate="ProjectStartDate" SetFocusOnError="false">
</asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Submit" />
You can check your code-behind whether you have defined this property somewhere.
Related
I have few textboxes and asp.net validation controls on a page. The validation fires when I click on "Submit" button. Is there anyway to fire the validation as soon as I leave the textbox? I would like to do the same validation for other 20+ fields in the form. However, only validating specific textbox when leaving it.
<asp:TextBox ID="txtclass" runat="server"></asp:TextBox>
<asp:RangeValidator ID="rvclass"
runat="server" ControlToValidate="txtclass"
ErrorMessage="Enter your class (6 - 12)" MaximumValue="12"
MinimumValue="6" Type="Integer">
</asp:RangeValidator>
<asp:Button ID="btnsubmit" runat="server" onclick="btnSubmit_Click" Text="Submit" />
Create a js function to perform the validating, then for each textbox you want to validate set the onblur and call that function. (I'm just free writing below so excuse the syntax error but you should get the gist)
function validateClass(val)
{
if(val.value > 5 && val.value < 13)
{
//alert(good!)
}
else
{
//alert(show error?)
}
}
call it in your textbox
<asp:TextBox ID="txtclass" runat="server" onblur="validateClass(this);"></asp:TextBox>
I have a textbox and save button on a pop-up, the textbox has a required field validator. I have a scenario, if the user accidentally forgets to enter data in the textbox and click save the required field validator kicks in, which is expected. But, now if the user enters data in the textbox and clicks on 'save', the record doesn't get saved on the first click instead it needs an additional click. I know the reason for this: it is not doing a postback when the button is clicked for first time, but for the second time it does and saves the data.
Does anyone know the workaround for this? The end user is getting annoyed by that additional click. Please note there is no javascript function associated with it. It is autogenerated javascript from the browser.
Code:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label runat="server" Text="" AssociatedControlID="txtTitle">
Title<span class="text-danger">*</span>
</asp:Label>
<asp:TextBox runat="server" CssClass="form-control" ID="txtTitle" >
</asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtTitle" Display="Dynamic" ErrorMessage="Required" ValidationGroup="questionTitle" CssClass="text-danger">
</asp:RequiredFieldValidator>
</div>
</div>
</div>
Save button:
<div class="row">
<div class="col-md-3 col-md-offset-9">
<asp:LinkButton runat="server" ID="lnkSave" CssClass="btn btn-lg btn-block btn-success btn-lg" role="button" ValidationGroup="questionTitle" OnClick="lnkSave_Click">
<i class="fa fa-floppy-o"></i> Save
</asp:LinkButton>
</div>
</div>
It seems like a common issue with the validator.
The validator error is suppose to clear out when lose focus to the textbox
however, apparently if your validator Display is set to Dynamic, when the error message appear, it will cause the triggering clearing the validator error to fail.
hence the clicking twice (first click trigger clear error which should have been trigger earlier but failed, second trigger actual form post)
solution is to change your RequiredFieldValidator Display to Static
more info checkout
RequiredFieldValidator have to click twice
RequiredFieldValidator requires user to click twice
I implemented a datepicker inside my web forms application.
I tested it on one form, and it was working. The code of the TextBox was:
<asp:TextBox runat="server" class="fieldset__input js__datepicker picker__input" type="text" id="TbDate" aria-haspopup="true" aria-expanded="false" aria-readonly="false" />
I tried to add the same textbox to another form but it wasn't triggering.
The other form had the same master page. I copied all the code aspx from the first form to the new one and it was working.
I tried deleting one line at a time to see why the datepicker was working with this code, and found that this line is needed to enable it:
<asp:TextBox runat="server" ID="tbEmail" CssClass="form-control" TextMode="SingleLine" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbEmail" ErrorMessage="The username/email field is required."/>
I want the datepicker to open when i click on the tbDate TextBox, but it only works if the RequiredFieldValidator for the TextBox tbEmail is present. If i delete the validator, the datepicker won't open on the tbDate TextBox. The Validator checks if the input of tbDate is an email format, so there is no connection to the tbDate TextBox.
Also, i tried to delete the other TextBox, and attach the fieldValidator to the tbDate TextBox, and it also works.
I don't understand how this RequiredFieldValidator is helping the datepicker to open, especially inside another textbox?
Understanding this would help me implementing it on other forms.
Thank You!
Not sure which datepicker plugin you are using but the markup for the datepickers are not the same.
<asp:TextBox runat="server" class="fieldset__input js__datepicker picker__input" type="text" id="TbDate" aria-haspopup="true" aria-expanded="false" aria-readonly="false" />
is not the same as
<asp:TextBox runat="server" ID="tbEmail" CssClass="form-control" TextMode="SingleLine" />
you are missing the classes fieldset__input js__datepicker picker__input in the second datepicker which might be selectors for the JS script that's initializing the datepicker. Try adding that and see if it works without the RequiredFieldValidator.
again experts,
On page loade, this dropdownList box, by deffault is invisible.
<td>
<asp:DropDownList ID="LongDistance" runat="server" style="display:none;" >
<asp:ListItem value="2">$2 per mile</asp:ListItem>
<asp:ListItem value="4">$4 per mile</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator4"
ControlToValidate="tripType" ErrorMessage = "please select long distance type!"
display="Dynamic" style="color: #FF0000; font-size: small" />
</td>
It becomes visible if certain condition is met.
My question is why is the user still being challenged to make a selection?
I would like for any invisible controls to NOT challenge user to make a selection unless the control is visible.
Any ideas how to fix this?
You should look for validation Groups. If you have to validate differently on two different button.
Validation work as the data is post to the server even if it is not visible. And validation controls work on submit button and validate each input if there is any validation controls is being used.
When you set the visibility of your control, you should also set the Enabled property of the RequiredFieldValidator4 validator to match the visibility of the control it is validating. The Enabled property of the validator controls whether the validation fires.
I have a GridView in this GridView there is a column which I use to select date with the use of asp:CalendarExtender. I have multiple rows in GridView which are dynamically generated.
When I click the image button calender pops up and I choose my date.
In some rows I want the User to select date when he clicks image button of that row. sometime I don't want to allow him to select date.
When he tries to change the date or click on the image button, he should get alert message saying that you are not allowed to change the date.
I want to handle it from client side. So please suggest me how to do this.
this is the aspx code.
<asp:TextBox runat="server" ID="StartDateTime" CssClass="search_area_text_vm_small" onclick = "javascript:DateClick(this.id);"></asp:TextBox>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/image3.jpg" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDateTime" PopupButtonID="Image1" Format="yyyy-MM-dd" ></asp:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="StartDateTime"
ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
You can make use of the OnClientDateSelectionChanged event of the CalendarExtender.
Use below code:
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDateTime" PopupButtonID="Image1" Format="yyyy-MM-dd" OnClientDateSelectionChanged="checkIfDateSelected()" >
</asp:CalendarExtender>
<javascript>
function checkIfDateSelected(){
var dateTextBox=document.getElementByid('StartDateTime');
if(dateTextBox!='')
{
alert ('Date once selected cannot be changed');
return false;
}
</javascript>
This will show the info pop up and prevent the form submission if the date has been selected already.