I would like to know if it is possible to do requiredfieldvalidator purely in javascript.
I do not want my button click which processes the page to perform a postback, as postback completely resets my styling and there is too much to reload on ispostback.
I will however do the postback to the server to update SQL once all the fields have been completed.
<asp:UpdatePanel id="PurGradeUpdate" runat="server" RenderMode="Inline">
<ContentTemplate>
<telerik:RadComboBox ID="PURGrade" runat="server" Width="100" EmptyMessage=" ---" Font-Bold="true"></telerik:RadComboBox>
<asp:RequiredFieldValidator ID="PurGradeValidate" runat="server" Display="Dynamic" ControlToValidate="PURGrade" ErrorMessage="!!!" Font-Italic="true" Font-Bold="true" ForeColor="Red" InitialValue=" ---" EnableClientScript="true"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PURProduct" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<telerik:RadButton ID="PurCreate" runat="server" AutoPostBack="false" OnClientClicked="PerformValidation"></telerik:RadButton>
I have the above in an update panel as the comboboxes are populated via SQL read, based on other comboboxes selected index changes.
I would now like to call that "PerformValidation" on my process button click and here the validation must happen, and if not valid, display the errormessage.
Thanks for the assistance.
Ok man i checked it on my VS and this works for sure:
<asp:UpdatePanel id="PurGradeUpdate" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="PURGrade" runat="server" Width="100" Font-Bold="true"></asp:DropDownList>
<asp:RequiredFieldValidator ID="PurGradeValidate" runat="server" Display="Dynamic" ControlToValidate="PURGrade" ErrorMessage="!!!" Font-Italic="true" Font-Bold="true" ForeColor="Red" InitialValue="---" EnableClientScript="true"></asp:RequiredFieldValidator>
<asp:DropDownList ID="PURProduct" runat="server" Width="100" Font-Bold="true"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PURProduct" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<Asp:Button ID="PurCreate" runat="server" AutoPostBack="true"></Asp:Button>
In aspx.cs file I added default value:
PURGrade.Items.Insert(0, "---");
So as i told you before you don't need to use custom JavaScript commands to validate on client side cuz asp required field validator runs on client side by default. The only think that can cause problems in your code is custom controls you use. Be sure that your combo box empty value is what is really added to the select list as a default value.
Related
UpdatePanel may not be related but, I heve this code:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" MaxLength="10" CssClass="form-control col-sm-7" ID="RegisterID" OnTextChanged="RegisterID_TextChanged" AutoPostBack="true"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" Enabled="false" MaxLength="15" autocomplete="chrome-off" CssClass="form-control col-sm-7" ID="RegisterPhone" OnTextChanged="RegisterPhone_TextChanged" AutoPostBack="true"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
I want that after the function is over Disable the Enabled to false and make focus on this (id = RegisterPhone)field
I tried both through Js and through C #
note! Other fields on the page, Yes become Enabled to false
I need to add something in: ScriptManager or in: UpdatePanel??
I tryed trigger the TextChange event with ajax but it dosnt realy work how i do it. Hope you guys can help me.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="0">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
The ScriptManager should appear before the UpdatPanel, not inside of it. And you don't need to define TextBox1 as a trigger. The TextBox being inside the UpdatePanel and the property ChildrenAsTriggers being true by default, the panel will be updated when TextBox1 loses focus after its content has been modified.
UPDATE
I originally misread the question. The following posts describes a method to trigger a postback and refresh the UpdatPanel every time a key is pressed in the TextBox: How do I make a Textbox Postback on KeyUp?.
I have a asp.net web page which contains many textboxes.
If any of these boxes I run some javascript via the onchange event of each field.
The javascript basically changes a textbox to 'Y' so I know which section of the page has changed something.
Everything works fine, however I just need to know if there is a way of making the onchange call better/shorter ? Since I have over >100 textboxes, there is a lot of repetitive onchange='CM('3'); on each and every textbox, so I am hoping there is a better way to handle this.
There are three divs, each containing some 35 textboxes, so perhaps there is a way of doing it by DIV, which I don't know.
Any guidance is appreciated.
<asp:TextBox ID="txtDC1_D" runat="server" CssClass="STD_desc160" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_C" runat="server" CssClass="STD_cur30" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_1" runat="server" CssClass="STD_value55" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_2" runat="server" cssClass="STD_value55" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_3" runat="server" cssClass="STD_value55" onchange="CM('3');"></asp:TextBox>
<asp:TextBox ID="txtDC1_B" runat="server" CssClass="STD_bassis" onchange="CM('3');"></asp:TextBox>
<br />
<asp:TextBox ID="txtDC2_D" runat="server" CssClass="STD_desc160" onchange="CM('2');"></asp:TextBox>
<asp:TextBox ID="txtDC2_C" runat="server" CssClass="STD_cur30" onchange="CM('2');"></asp:TextBox>
<asp:TextBox ID="txtDC2_1" runat="server" CssClass="STD_value55" onchange="CM('2');" ></asp:TextBox>
<asp:TextBox ID="txtDC2_2" runat="server" cssClass="STD_value55" onchange="CM('2');" ></asp:TextBox>
<asp:TextBox ID="txtDC2_3" runat="server" cssClass="STD_value55" onchange="CM('2');" ></asp:TextBox>
<asp:TextBox ID="txtDC2_B" runat="server" CssClass="STD_bassis" onchange="CM('2');"></asp:TextBox>
<br />
If jQuery is also an option ( which I strongly recommend) , so :
$(function (){
$("input[type=text]").on('change',function (){
if ($(this).val()) $(this).val('Y'); else $(this).val('');
})
});
if not , I will delete this answer.
I'm doing validation of a textbox with RequiredFieldValidation.
I want it to validate the textbox only when a button is clicked, not when textbox loses focus.
Now, every time when I click anywhere else on a page it shows an error message.
Here is a code:
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtEmail" Text='<%#Eval("CustEmail") %>' />
<asp:RequiredFieldValidator ControlToValidate="txtEmail"
ValidationGroup="grpEmail"
ErrorMessage="Must enter Email Address" runat="server"></asp:RequiredFieldValidator>
<asp:Button Text="Update Email" ButtonType="Button" CommandName="UpdateEmail"
ValidationGroup="grpEmail"
CausesValidation="true"
Visible="true" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
I just need it to be validated when button is clicked. That's it.
What am I doing wrong?
Setting the attribute CausesValidation of the Textbox to false should do the trick.
I have a FileUpload in the Updatepanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:PostBackTrigger ControlID="SaveButton" />
</Triggers>
<ContentTemplate>
<cc1:TabContainer CssClass="visoft__tab_xpie7" runat="server" ID="tab" ActiveTabIndex="0" Width="100%" Font-Size="11px">
<cc1:TabPanel runat="server" HeaderText="اطلاعات پایه" ID="TabPanel1">
<ContentTemplate>
<div class="row">
<span style="width: 100px" class="rowtitle">تصویر </span>
<asp:FileUpload ID="ImageFileUpload" runat="server"/>
<asp:ImageButton ID="RemoveImageButton" runat="server" ImageUrl="~/images/delete.png" />
</div>
<div class="row">
<span style="width: 100px" class="rowtitle">Category</span>
<asp:DropDownList ID="CategoryDropDownList" runat="server" Width="200px" AutoPostBack="True" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="CategoryDropDownList_SelectedIndexChanged" />
<asp:RequiredFieldValidator ID="CategoryRFV" runat="server" ControlToValidate="CategoryDropDownList" ForeColor="Red" ValidationGroup="Save" ErrorMessage="مجموعه را انتخاب کنید." Text="*" />
</div>
<div class="row" style="height: 300px">
<span style="width: 100px" class="rowtitle">توضیحات کامل</span>
<editor:HtmlEditor Style="float: left" runat="server" Width="600px" ID="DescriptionHtmlEditor" />
<asp:RequiredFieldValidator Text="*" ID="DescriptionRFV" runat="server" ControlToValidate="DescriptionHtmlEditor" ForeColor="Red" ValidationGroup="Save" ErrorMessage="توضیحات را وارد کنید ." />
</div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<div class="row" style="text-align: center">
<asp:Button ID="SaveButton" class="button" Width="100px" OnClick="SaveButton_Click" runat="server" ValidationGroup="Save" Text="ذخیره" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
when i was trying to access the FileUpload FileName property after a partial postback of an updatepanel, it was empty.
I want get Filenme of uploadpanel in oncange event witj javascrip, but i don't get Fullpath of file.
function FileChange()
{
var filename = document.getElementById('<%= FileNameUpload.ClientID %>');
var file = document.getElementById('fileupload');
filename.value = file.value;
}
How to get filename of fileupload after partial postback?
When i was trying to access the FileUpload FileName property after a
partial postback of an updatepanel, it was empty.
Update Panels simply intercept the regular form submit and perform a FULL postback using an xmlhttp request. Because of this, the selection initially made on the input:file element was already submitted in the initial postback and you can't read it anymore afterwards. To prove what I am saying, try and read the file name on the initial postback and you'll see that you'll be able to.
Looking at your code, it also seems that you are trying to set the value of fileupload element programmatically. This is not possible either for security reasons - you can't access a user's hard drive from Javascript and decide which file the user should upload to your website. Once the user selected the file and the form was submitted, the selection is gone; the user would have to re-select the file himself.
You can try many hacks to make this work with UpdatePanels, but the cleanest in the long run is to implement this using jQuery Ajax because you have complete control of what gets submitted and what doesn't and when.
I hope this helps clarifying why your approach won't work.