Jquery Form Validation nor working - javascript

Please help me out i am new to asp.net, wanted to create one simple page with form validation.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Form1").validate({
rules: {
UserName: "required"
},
messages: {
UserName: "Enter your firstname"
}
});
});
</script>
Login.aspx Page
Log In
<p>
Please enter your username and password.
<asp:HyperLink ID="RegisterHyperLink" runat="server" EnableViewState="false">Register</asp:HyperLink> if you don't have an account.
</p>
<asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false">
<LayoutTemplate>
<span class="failureNotification">
<asp:Literal ID="FailureText" runat="server"></asp:Literal>
</span>
<div class="accountInfo">
<fieldset class="login">
<legend>Account Information</legend>
<p>
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Username:</asp:Label>
<asp:TextBox ID="UserName" runat="server" CausesValidation="True" ClientIDMode="Static" ></asp:TextBox>
</p>
<p>
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
</p>
<p>
<asp:CheckBox ID="RememberMe" runat="server"/>
<asp:Label ID="RememberMeLabel" runat="server" AssociatedControlID="RememberMe" CssClass="inline">Keep me logged in</asp:Label>
</p>
</fieldset>
<p class="submitButton">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"/>
</p>
</div>
</LayoutTemplate>
</asp:Login>
Above shown is partial code i have written on my master page.
No error displayed, but unfortunately script is not working.

Didn't knew that script should be as per the asp:login control.
"<%= ((TextBox)LoginUser.FindControl("UserName")).UniqueID %>"
Sorry guys, before i missed my HTML code :(

Related

OnClientClick not working for Imagebutton hidden fileupload

I am working on Asp.net form as follows
<form runat="server" id="form">
<label>Select Category <span>*</span></label>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Mobiles</asp:ListItem>
<asp:ListItem>Electronics and Appliances</asp:ListItem>
<asp:ListItem>Cars</asp:ListItem>
<asp:ListItem>Bikes</asp:ListItem>
<asp:ListItem>Furniture</asp:ListItem>
<asp:ListItem>General</asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
<label>Ad Title <span>*</span></label>
<asp:TextBox ID="txt_title" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Ad Description <span>*</span></label>
<%--<textarea class="mess" placeholder="Write few lines about your product"></textarea>--%>
<asp:TextBox ID="txt_Body" class="mess" placeholder="Write few lines about your product" TextMode="multiline" Style="resize: none" Width="770px" Height="150px" Wrap="true" runat="server" Font-Bold="True"></asp:TextBox>
<div class="clearfix"></div>
<div class="upload-ad-photos">
<label>Photos for your ad :</label>
<div class="photos-upload-view">
<asp:ImageButton ID="ImageButton1" UseSubmitBehavior="false" OnClientClick="return chooseFile();" ImageUrl="Images/Capture.JPG" runat="server" />
<asp:FileUpload ID="FileUploadControl" runat="server" Visible="False" />
<div id="messages">
<p>Status Messages</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="personal-details">
<label>Your Name <span>*</span></label>
<asp:TextBox ID="txt_name" class="name" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Mobile No <span>*</span></label>
<asp:TextBox ID="txt_phn" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Email Address<span>*</span></label>
<asp:TextBox ID="txt_email" class="email" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<p class="post-terms">By clicking <strong>post Button</strong> you accept our Terms of Use and Privacy Policy</p>
<asp:TextBox ID="post_sub" Text="Post" type="submit" runat="server"></asp:TextBox>
<div class="clearfix"></div>
</form>
Where I want to call a hidden fileupload when Imagebutton is clicked using JavaScript as follows:
<script type="text/javascript">
function chooseFile() {
document.getElementById("#FileUploadControl").click();
alert("grt");
return false;
}
</script>
But, I was not able to call the function instead page reloads, as you can see I am returning false in the function also. Please guide me to make this work.
You have set the Visible property of the FileUpload Control to false. Therefore it does not exist on the client side. The Visible property is not the same as display:none in HTML/CSS.
You should do something like this:
<span style="display: none">
<asp:FileUpload ID="FileUploadControl" runat="server" />
</span>
And it's always better to use the ClientID instead of hard coding the ID of the FileUpload Control.
<script type="text/javascript">
function chooseFile() {
document.getElementById("<%= FileUploadControl.ClientID %>").click();
return false;
}
</script>
When you use document.getElementById you shouldn't mention # since it already searches for id attribute, in your current state it will look for id #FileUploadControl which is not your element id. change your code to this:
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
<form runat="server" id="form">
<div class="photos-upload-view">
<img id="ImageButton1" OnClick="return chooseFile();" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" style="widdth:40px;height:40px;" />
<input type="file" ID="FileUploadControl" runat="server" style="display:none;" />
</div>
</form>
Yes, number one is you using # of you document.getElementById("#FileUploadControl") it's wrong and you should use it without # document.getElementById("FileUploadControl").
second thing if you use Visible="False" attribute it not rendering the HTML element, without that you can use below two methods.
FileUploadControl.Style["visibility"] = "hidden" in your backend file
using following css class for hide
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
.setDisplayNone {
display:none;
}
<asp:FileUpload ID="FileUploadControl" runat="server" CssClass="setDisplayNone" />

ModalPopUpExtender not showing the pop up

I have a modalpopUpExtender and trying to pop up list of ATM
.Following code shows the ASP Panel where i want to do the pop up
<asp:Panel ID="pnlBanks" CssClass="atmBnkPopup" runat="server" meta:resourcekey="pnlBanksResource1">
<div id="pnlBanksCnt" style="display: none;">
<h2 class="sectionHeading">
<asp:Literal ID="litATMPaymentHeader" runat="server" meta:resourcekey="litATMPaymentHeaderResource1"
Text="ATM Payment (Indonesia)" />
</h2>
<asp:Literal ID="litATMPaymentText" runat="server" meta:resourcekey="litATMPaymentTextResource1" />
<br />
<div style="text-align: center;">
<asp:LinkButton ID="lbCloseBanks" runat="server" meta:resourcekey="lbCloseBanksResource1"
Text="<img
alt="Close" src="images/btn/btn-close.gif" __designer:mapid="5f" />" />
</div>
</div>
<asp:Button ID="btnBanks" runat="server" Style="display: none;" meta:resourcekey="btnBanksResource1" />
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeBanks" runat="server" TargetControlID="btnBanks" CancelControlID="lbCloseBanks"
PopupControlID="pnlBanks" BackgroundCssClass="modalBackground" DynamicServicePath=""
Enabled="True" />
In the Aspx page, trying to call a JavaScript to pop up the screen
<p>
<asp:Literal ID="litATMBanks" runat="server" Text="To view the banks at which we accept ATM payment," meta: resourcekey="litATMBanksResource1" />
<a href="javascript:ShowBankList();">
<asp:Literal ID="litATMBanksLink" runat="server" Text="click here" meta: resourcekey="litATMBanksLinkResource1" />
</a>
</p>
Here is My Java Script
function ShowBankList() {
var modal = $find("mpeBanks");
if (modal) {
$("pnlBanksCnt").style.display = "block";
modal.show();
}
}
I am getting Modal as null .
I am not sure what is missing in the code . Why $find not able to find the element

validation on a required field

working from the validation example:
http://www.w3schools.com/aspnet/showaspx.asp?filename=demo_validationsum
using asp.net I would like to display the error message 'You must enter a value in the following fields:' to include the field name that is wrong, when data is incorrectly entered.
so far the user cant continue until the correct data is entered and a red * appears beside the column. I would now like to add the error message.
<div id="floater_EditData_Panel_popup" title="Feature Information" class="floaterDiv">
Select a feature to view/edit feature information.
<p> </p>
<asp:UpdatePanel runat="server" id="UpdatePanelDetails1" updatemode="Conditional" Childrenastriggers="false">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" >
</asp:PlaceHolder>
<br />
<br />
<div id="EditDataPanelMessageOutput" style="color:Red;">
<asp:ValidationSummary ID="ValidationSummary1"
HeaderText="You must enter a value in the following fields:"
DisplayMode="BulletList"
EnableClientScript="true"
runat="server"/>
</div>
<div id="FeatureMeasureOutput"></div>
<br />
<br />
<div class="buttonwrap">
<div id="Span2" class="ActionBtns" style="display: inline-block;" >
<asp:button runat="server" id="UpdateButton" value="Save" Text="Save" OnClientClick="ValidateEditData();" CausesValidation="true" ValidationGroup="g_currentSelectedLayerName" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
function ValidateEditData() {
if (Page_ClientValidate(g_currentSelectedLayerName)) {
//alert('it is valid');
updateFeature();
return true;
}
else {
//alert('Data not valid');
return false;
}
}
Shouldnt the validation summary tag apply to the entire page?
How about:
<asp:ValidationSummary ID="ValidationSummary1"
HeaderText="You must enter a value in the following fields:"
DisplayMode="BulletList"
EnableClientScript="true"
ValidationGroup="g_currentSelectedLayerName"
runat="server"/>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" Display="Dynamic" ControlToValidate="txtFirstName" ErrorMessage="First Name is required" ValidationGroup="g_currentSelectedLayerName"></asp:RequiredFieldValidator>
<asp:Button runat="server" Text="Submit" ValidationGroup="g_currentSelectedLayerName" />
And then add an appSetting to your web.config:
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>

How to fire javascript function on user control blur event

I'm developing a Web user control
.ascx
<div style="position:relative;border:none;" id="divComboContainer" runat="server" >
<asp:HiddenField ID="Hidden_TextField" Value="" runat="server" />
<asp:HiddenField ID="Hidden_ValueField" Value="" runat="server" />
<asp:HiddenField ID="Hidden_Value" Value="" runat="server" />
<asp:HiddenField ID="Hidden_Row_Index" Value="" runat="server" />
<asp:HiddenField ID="hfScrollPosition" Value="" runat="server" />
<asp:TextBox ID="txtDisplay" runat="server" CssClass="tb10" ></asp:TextBox>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel"
Width="280px" style="display :none;visibility: hidden;padding-bottom:-1px;
margin-top:-28px;margin-left:0px;background-color:#F5F5F5;overflow:hidden;
height:auto;min-height:100px;max-height:300px;max-width:350px;" >
<div id="CombClose" style="padding-right:2px;color:#FFFFFF;text-align:right;cursor:pointer;height:35px;background-color:#507CD1;width:100%;" runat="server" >Close</div>
<br />
<div runat="server" id="listDiv" style="padding-bottom:-1px;margin-top:-28px;
margin-left:0px;background-color:#F5F5F5;overflow-Y:auto;overflow-X:hidden;
height:200px;max-height:265px;max-width:350px;" tabindex="0">
<asp:CheckBoxList ID="chkList" runat="server" CssClass="Chklist">
</asp:CheckBoxList>
</div>
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="txtDisplay"
DropDownControlID="DropPanel" HighlightBorderColor="Transparent" OnClientPopup="OnClientPopup" />
</div>
In this control i need to fire some java-script on lostFocus or blur event.
Can any one guide me how can i call my script on control blur or lostFocus.

ASP Enable enter key

I have a login box that I need to have submitted when enter is pressed. Below you are going to find part of the code. Please any help would be appreciated.
<div class="box-login clearfix">
<div class="box-login-header">
<h3>
Registered Users</h3>
</div>
<div>
<asp:Label ID="LblMessage" runat="server" ForeColor="Red"></asp:Label>
<asp:RequiredFieldValidator ID="Rfv_LoginId" runat="server" ControlToValidate="TextLogInId"
ErrorMessage="Login Id is required" ValidationGroup="A" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RevLoginId" runat="server" ControlToValidate="TextLogInId"
ErrorMessage="Login id does not contain spaces,double quotes or +><=';:,|/"
ValidationExpression="[^ "+><=':,|/]*$" ValidationGroup="A" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="Rfv_Password" runat="server" ControlToValidate="TextPassword"
ErrorMessage="Password is required" ValidationGroup="A" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="CvPassword" runat="server" ClientValidationFunction="ValidatePassword"
ControlToValidate="TextPassword" ErrorMessage="" Display="Dynamic"></asp:CustomValidator>
<asp:RegularExpressionValidator ID="RevPassword" runat="server" ControlToValidate="TextPassword"
ErrorMessage="Space is not allowed" ValidationExpression="[^ ]*$" ValidationGroup="A"
Display="Dynamic"></asp:RegularExpressionValidator>
<asp:Label ID="LblPassword" runat="server" ForeColor="#FF0066"></asp:Label>
</div>
<p>
Please enter your GoCCL.com Login ID & Password below</p>
<ul>
<li>
<label for="cloginid">
Login ID:</label>
<asp:TextBox ID="TextLogInId" runat="server" CssClass="text-box" MaxLength="16" onblur="ClearMessage()"></asp:TextBox>
</li>
<li>
<label for="cpassword">
Password:</label>
<asp:TextBox ID="TextPassword" runat="server" TextMode="Password" CssClass="text-box"
MaxLength="16" onblur="ClearMessage()"></asp:TextBox>
</li>
</ul>
<asp:LinkButton ID="btnForgotPassword" CssClass="forgot" runat="server" Text="Forgot your Login ID or Password?"
OnClick="btnForgotPassword_Click"></asp:LinkButton>
<asp:ImageButton ID="CmdLogin" CssClass="btn-login" OnClick="CmdLogin_OnClick" OnClientClick="ClearMessage()"
runat="server" ImageUrl="/stylesheets/bookccl/images/button/btn-login.gif" CausesValidation="true" />
<div class="box-login-fotter clearfix">
<p>
<strong>New to GoCCL? </strong>
<asp:LinkButton ID="btnRegistration" runat="server" Text="Register Now" CssClass="register-new"
OnClick="btnRegistration_Click"></asp:LinkButton>
to join the fun!</p>
</div>
</div>
You could wrap it in a Panel control and set the DefaultButton to the button you want invoked when pressing Enter. There are also other options explored here:
http://www.beansoftware.com/asp.net-tutorials/accept-enter-key.aspx

Categories