Here is the javascript validation code:
if (document.getElementById("<%=txtCategoryName.ClientID %>").value.trim() == "") {
document.getElementById("<%=dvMessage.ClientID %>").innerHTML = "Please enter Category.";
document.getElementById("<%=txtCategoryName.ClientID %>").focus();
document.getElementById("<%=txtCategoryName.ClientID %>").classList.add("ErrorControl");
// document.getElementById("<%=txtCategoryName.ClientID %>").style.outline = '1px solid red';
// document.getElmentById("<%=txtCategoryName.ClientID %>").style.border = '3px solid red';
return false;
}
if (document.getElementById("<%=txtCategoryDescription.ClientID %>").value.trim() == "") {
document.getElementById("<%=dvMsg.ClientID %>").innerHTML = "Please enter Category Description.";
document.getElementById("<%=txtCategoryDescription.ClientID %>").focus();
document.getElementById("<%=txtCategoryDescription.ClientID %>").classList.add("ErrorControl");
// document.getElementById("<%=txtCategoryDescription.ClientID %>").style.outline = '1px solid red';
return false;
}
}
<script>
function checkfunction(val) {
if (val != "") {
document.getElementById("<%=txtCategoryName.ClientID %>").classList.remove("ErrorControl");
// document.getElementById("<%=dvMessage.ClientID %>").style.display = 'none';
document.getElementById("<%=txtCategoryDescription.ClientID %>").classList.remove("ErrorControl");
// document.getElementById("<%=dvMsg.ClientID %>").style.display = 'none';
}
}
</script>
Here is the text box:
<div class="field">
<div id="dvMessage" runat="server" style="color: Red" >
</div>
<label>
Category Name <em>*</em>
</label>
<div>
<asp:TextBox ID="txtCategoryName" runat="server" CssClass="form-01-control" onkeyup="checkfunction(this.value)" placeholder="Enter Category Name" ></asp:TextBox>
</div>
<div id="dvMsg" runat="server" style="color: Red">
</div>
<label>
Category Description <em>*</em></label>
<div>
<asp:TextBox ID="txtCategoryDescription" runat="server" CssClass="form-01-control" onkeyup="checkfunction(this.value)" placeholder="Enter Category Description"></asp:TextBox>
</div>
<label>
Parent Category </label>
<div>
<asp:DropDownList ID="ddlParentCategory" runat="server" Width="250px" class="form-01-control">
</asp:DropDownList>
</div>
<label>
Category Image</label>
<div>
<asp:FileUpload ID="fuImage" runat="server" />
<asp:Image ID="imgCategory" Width="100" Height="100" runat="server" />
</div>
</div>
The problem is that validation not working properly. The ERROR MESSAGE shows I'm having a problem. Please tell me what to do for multiple textbox and dropdown and how to use javascript validation?
Sir, is something like this what you need? And as Abhay said, there's a load of plugins you can use, jquery is just a javascript library.
<script>
var catName = {
'label' : document.getElementById("<%=dvMessage.ClientID %>"),
'textbox' : document.getElementById("<%=txtCategoryName.ClientID %>")
},
catDesc = {
'label' : document.getElementById("<%=dvMsg.ClientID %>"),
'textbox' : document.getElementById("<%=txtCategoryDescription.ClientID %>")
},
noText = function hasText( textbox ) {
return textbox.value.trim().length === 0;
};
// This entire part might be redundant, unless the textbox comes back from the server with text already inside it.
// If the textbox is always empty at startup, this part could be replaced by placing the text already into the div.
if (noText(catName.textbox)) {
catName.label.innerHTML = "Please enter Category.";
catName.textbox.focus()
catName.textbox.classList.add("ErrorControl");
}
if (noText(catDesc.textbox)) {
catDesc.label.innerHTML = "Please enter Category Description.";
catDesc.textbox.focus()
catDesc.textbox.classList.add("ErrorControl");
}
function checkfunction( textValue ) {
var catNameCls = catName.textbox.classList,
catDescCls = catDesc.textbox.classList;
if (textValue.length !== 0) {
if (catNameCls.contains("ErrorControl")) catNameCls.remove("ErrorControl");
else catNameCls.add("ErrorControl");
if (catDescCls.contains("ErrorControl")) catDescCls.remove("ErrorControl");
else catDescCls.add("ErrorControl");
}
}
</script>
Related
I am trying to apply validation to my login page. A separate JavaScript function is Used for that, but that function is not called in any way.
<script type="text/javascript">
function myFunction() {
var pass = document.getElementById("passwordsignup").value;
var ConfirmPass = document.getElementById("passwordsignup_confirm").value;
var email = document.getElementById("emailsignup").value;
var uname = document.getElementById("usernamesignup").value;
var PassExpr = "/^[a-zA-Z0-9!##$%^&*]{6,16}$/";
var emailExp = "/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([com\co\.\in])+$/";
if (uname == "" && email == "" && pass == "" && ConfirmPass == "") {
alert("All Feilds are Required");
return false;
}
if (uname == "")
{
alert("Please Enter User Name !!");
return false;
}
if (email == "")
{
alert("Please Enter Email !!")
return false;
}
else {
if (!email.match(emailExp)) {
alert("Please Enter Valid Email Id");
return false;
}
}
if (pass == "")
{
alert("Please Enter Password..!!");
return false;
}
else {
if(pass.length>6 && pass.length<16)
{
if (!PassExpr.test(pass)) {
alert("password should contain atleast one number and one special character");
return false;
}
}
else {
return false;
}
}
if (ConfirmPass == "")
{
alert("Please Re-Enter Password..!!");
return false;
}
else {
if (pass != ConfirmPass) {
alert("Please Re-Enter Password to Match !!!!!");
return false;
}
}
}
and my form is:
<div id="register" class="animate form">
<form id="form2" runat="server" onsubmit="return myFunction();">
<h2> Sign up </h2>
<p>
<label for="usernamesignup" class="uname">UserName</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="User Name" runat ="server" onchange="checkUserName();"/>
<%--<asp:TextBox ID="usernamesignup1" runat="server" OnTextChanged="checkUserName()" ></asp:TextBox>--%>
<asp:Label ID="LabelStatus" runat="server" Text="Label"></asp:Label><br />
</p>
<p>
<label for="emailsignup" class="youmail" >Email </label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="Email" runat="server" />
</p>
<p>
<label for="passwordsignup" class="youpasswd">password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="Password" runat="server"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" title="Please enter the same Password as above." type="password" placeholder="Re-Enter Password" runat="server"/>
</p>
<p class="login button">
<%--<asp:Button ID="btnSignup" runat="server" Text="Sign Up" OnClick="Button1_Click" Width="150px" CssClass="btnSignup" Height="46px" />     </p>--%>
<asp:Button ID="btnSignup" runat="server" Text="Sign Up" onClientClick="return myFunction();" OnClick="btnSignup_Click" Width="150px" Height="40px"/>
</p>
The form is submitted without checking for validation. Is there any other way to call the JavaScript function?
Are you getting any javascript error? Open up your browser console, and you'll see Uncaught SyntaxErrors.
All the code is working but only one problem is that div can not hide after button click event is fire.
how to hide "addresspopup" div after button "btnAddress" is click.
I have use update panel in div block.
Below is my code please help as soon as possible.
page.aspx
<head>
<script type="text/javascript">
function Validate() {
document.getElementById("btnPincode").click();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).keyup(function(e) {
if (e.keyCode == 27) { // esc keycode
$('#addresspopup').hide();
}
});
});
function DisplayOption(options)
{
if(options=='Address'){
$("#addresspopup").show();
return true;
}
if(options=='AddressClose'){
$("#addresspopup").hide();
return true;
}
}
</script>
</head>
<body>
<a id="addnewaddress" href="#" onclick="javascript:DisplayOption('Address');" class="button_black big_btn fullscreen-container">Add New Address</a>
<div id="addresspopup" style="display:none;" runat="server">
<div class="arcticmodal-overlay" style="opacity: 0.6; background-color: rgb(0, 0, 0);"></div>
<div class="arcticmodal-container">
<div class="arcticmodal-container_i">
<div>
<div class="arcticmodal-container_i2">
<div id="addresspopup_mw" class="modal_window">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<a onclick="javascript:DisplayOption('AddressClose');" class="close arcticmodal-close"></a>
<header class="on_the_sides">
<div class="left_side">
<h4>Enter a new shipping address</h4>
</div>
</header><!--/ .on_the_sides-->
<div class="type_2">
<div id="errorpincode1" runat="server" visible="false" class="alert_box error mar-bottom10">
<asp:Label ID="lblErrorpincode1" runat="server" Text="Error"></asp:Label>
</div>
<ul>
<li>
<asp:TextBox ID="txtAddressName" runat="server" placeholder="Your name *"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtAddress" runat="server" placeholder="Address *" Rows="4" TextMode="MultiLine"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtLandmark" runat="server" placeholder="Landmark"></asp:TextBox>
</li>
<li>
<asp:TextBox ID="txtPincode" runat="server" MaxLength="6" OnBlur="javascript:Validate()" placeholder="Pincode *"></asp:TextBox>
<asp:Button ID="btnPincode" runat="server" Text="Button" onclick="btnPincode_Click" style="display:none" ></asp:Button>
</li>
<li>
<asp:TextBox ID="txtCity" runat="server" placeholder="City *"></asp:TextBox>
</li>
<li>
<asp:DropDownList ID="ddlState" runat="server" class="mar-bottom5">
</asp:DropDownList>
</li>
<li>
<asp:TextBox ID="txtPhone" runat="server" placeholder="Phone *"></asp:TextBox>
</li>
<li class="v_centered pad-top-10">
<asp:Button ID="btnAddress" runat="server" class="button_black big_btn fullscreen-container" Text="Save & Continue" OnClick="btnAddress_Click"></asp:Button>
</li>
</ul>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddress" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
page.cs file
protected void btnAddress_Click(object sender, EventArgs e)
{
if (txtAddressName.Text == "")
{
lblErrorpincode1.Text = "Please enter your Full Name";
errorpincode1.Visible = true;
SetFocus(txtAddressName);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtAddress.Text == "")
{
lblErrorpincode1.Text = "Please enter your Full Address";
errorpincode1.Visible = true;
SetFocus(txtAddress);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtPincode.Text == "")
{
lblErrorpincode1.Text = "Please enter your Pincode";
errorpincode1.Visible = true;
SetFocus(txtPincode);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtCity.Text == "")
{
lblErrorpincode1.Text = "Please enter your City";
errorpincode1.Visible = true;
SetFocus(txtCity);
return;
}
else
{
errorpincode1.Visible = false;
}
if (ddlState.SelectedIndex == 0)
{
lblErrorpincode1.Text = "Please select your State";
errorpincode1.Visible = true;
SetFocus(ddlState);
return;
}
else
{
errorpincode1.Visible = false;
}
if (txtPhone.Text == "")
{
lblErrorpincode1.Text = "Please enter your Phone Number";
errorpincode1.Visible = true;
SetFocus(txtPhone);
return;
}
else
{
errorpincode1.Visible = false;
}
string pin = " AND Pincode = " + txtPincode.Text + " ";
DataTable dt = bll.getCustomDeliverySearch(pin);
if (dt.Rows[0][5].ToString() == "False")
{
lblErrorpincode1.Text = "As of now we DO NOT Deliver at this Address. Please add Another Address.!";
errorpincode1.Visible = true;
return;
}
else
{
errorpincode1.Visible = false;
}
DateTime created;
DateTime modified;
created = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
modified = DateTime.ParseExact(DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt"), "MM/dd/yyyy hh:mm:ss tt", System.Globalization.CultureInfo.InvariantCulture);
// QUERY for insert data here
Session["Name"] = FixString(txtAddressName.Text);
Session["Address"] = FixString(txtAddress.Text) + ", " + FixString(txtLandmark.Text);
Session["City"] = txtCity.Text;
Session["Pincode"] = txtPincode.Text;
Session["State"] = ddlState.SelectedValue;
Session["Mobile"] = txtPhone.Text;
BindData();
addresspopup.Attributes.Add("Style", "display:none;");
}
You can make a async call using ScriptManager during postback to hide your div section.
CodeBehind:
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "hideaddress", "javascript: $(function(){ hideAddress(); });", true);
Aspx
<body>
<div> ... </div>
<script type="text/javascript">
function hideAddress() {
$('#addresspopup').hide();
}
</script>
</body>
Add a script block above end of body tag. Also you need to comment out following line and use above mentioned code.
addresspopup.Attributes.Add("Style", "display:none;");
I am new to .asp and Javascript and wondered if someone was able to advise how to show validation errors for fields below the form in a single table or text field rather than using alerts. Alerts and validation are working.
Here is the table that i plan to put the validation errors into:
<asp:Table ID="StatusTable"
runat="server" Width="100%"><asp:TableRow ID="StatusRow" runat="server">
<asp:TableCell ID="StatusTextCell" runat="server" Width="95%">
<asp:TextBox ID="StatusTextBox" runat="server" Width="100%" />
</asp:TableCell><asp:TableCell ID="StatusPadCell" runat="server" Width="5%">
</asp:TableCell></asp:TableRow></asp:Table>
And here is an example of some the Javascript I am using where i need the validation error messages to show in the table rather than from alerts.
Would be extremely grateful for any advise
< script type = "text/javascript"
language = "Javascript" >
function RequiredTextValidate() {
//check all required fields from Completed Table are returned
if (document.getElementById("<%=CompletedByTextBox.ClientID%>").value == "") {
alert("Completed by field cannot be blank");
return false;
}
if (document.getElementById("<%=CompletedExtTextBox.ClientID %>").value == "") {
alert("Completed By Extension field cannot be blank");
return false;
}
if (document.getElementById("<%=EmployeeNoTextBox.ClientID %>").value == "") {
alert("Employee No field cannot be blank");
return false;
}
if (document.getElementById("<%=EmployeeNameTextBox.ClientID %>").value == "") {
alert("Employee Name field cannot be blank");
return false;
}
return true;
}
< /script>
function ValidateFields() {
//Validate all Required Fields on Form
if (RequiredTextValidate() && CheckDate(document.getElementById("<%=SickDateTextBox.ClientID%>").value) && CheckTime(this) && ReasonAbsent() && ReturnDateChanged() && FirstDateChanged() && ActualDateChanged() == true) {
return true;
}
else
return false;
}
There are many ways that this type of thing can be done, here is one way which I have put together based on what you have so far...
http://jsfiddle.net/c0nh2rke/
function RequiredTextValidate() {
var valMessage = '';
var valid = true;
//check all required fields from Completed Table are returned
if (document.getElementById("test1").value == "") {
valMessage += 'Completed by field cannot be blank <br />';
valid = false;
}
if (document.getElementById("test2").value == "") {
valMessage += 'Completed By Extension field cannot be blank <br />';
valid = false;
}
if (document.getElementById("test3").value == "") {
valMessage += 'Employee No field cannot be blank <br />';
valid = false;
}
if (document.getElementById("test4").value == "") {
valMessage += 'Employee Name field cannot be blank <br />';
valid = false;
}
if (valid) {
return true;
}
else
{
document.getElementById("errors").innerHTML = valMessage;
return false;
}
}
<form >
<input id="test1" type="text" /><br />
<input id="test2" type="text" /><br />
<input id="test3" type="text" /><br />
<input id="test4" type="text" /><br />
<input type="button" value="Submit" onclick="RequiredTextValidate()" />
</form>
<div id="errors"><div>
HTML
<form >
<input id="test1" type="text" /><br />
<input id="test2" type="text" /><br />
<input id="test3" type="text" /><br />
<input id="test4" type="text" /><br />
<input type="button" value="Submit" onclick="RequiredTextValidate()" />
</form>
<div id="errors"><div>
Script
function RequiredTextValidate() {
var valMessage = '';
var valid = true;
//check all required fields from Completed Table are returned
if (document.getElementById("test1").value == "") {
valMessage += 'Completed by field cannot be blank <br />';
valid = false;
}
if (document.getElementById("test2").value == "") {
valMessage += 'Completed By Extension field cannot be blank <br />';
valid = false;
}
if (document.getElementById("test3").value == "") {
valMessage += 'Employee No field cannot be blank <br />';
valid = false;
}
if (document.getElementById("test4").value == "") {
valMessage += 'Employee Name field cannot be blank <br />';
valid = false;
}
if (valid) {
return true;
}
else
{
document.getElementById("errors").innerHTML = valMessage;
return false;
}
}
The best JavaScript is no JavaScript.
To that end, consider:
<form action="javascript:alert('Submitted!');" method="post">
<input type="text" name="someinput" placeholder="Type something!" required />
<input type="submit" value="Submit form" />
</form>
Notice how the browser will render native UI to show that the field was left blank? This is by far the best way to do it because it doesn't rely on JavaScript. Not that there's anything wrong with JS, mind, but far too often a single typo in form validation code has caused hours of debugging!
I have some ASP.NET aspx form that contains:
<div class="form-group input-group" runat="server" id="div_last_name">
<span class="input-group-addon glyphicon glyphicon-user"></span>
<asp:TextBox ID="TextBox4" CssClass="form-control required" runat="server" placeholder="Last Name"></asp:TextBox>
</div>
<div class="form-group input-group" runat="server" id="div_email" >
<span class="input-group-addon">#</span>
<asp:TextBox ID="TextBox1" CssClass="form-control required" runat="server" placeholder="E-Mail"></asp:TextBox>
</div>
I want to validate using this jQuery, but I don't know how to use it.
jQuery(document).ready(function ($) {
$("#btnRegister_Click").click(function () {
var error = 0;
$('input.required').each(function (i, item) {
if ($(item).val() == '') {
$(item).addClass('form-control has-error');
error = 1;
}
else {
$(item).removeClass('form-control has-error');
}
});
if (error) {
return false;
}
});
var min_height = jQuery(window).height();
jQuery('div.col-lg-6 col-lg-offset-3').css('min-height', min_height);
jQuery('div.col-lg-6 col-lg-offset-3').css('line-height', min_height + 'px');
$(".inner", ".boxed").fadeIn(500);
});
Where it says:
$("#btnRegister_Click")
You need to replace that with the name of your button. If it's a regular HTML button, just use the name of your button like:
$("#nameofbutton")
If you using Server Control, you need to get the unique client id of the button. You can do that using:
$('#<%= nameofbutton.ClientID %>')
I have a div2 which I will show only when RadioButtonList1 value is "Yes" in div1 through javascript function getvalue().Initially I am not showing div2 using c# code.
<fieldset id="disc" class="nt_generic">
<div runat="server" id="div1">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"
OnClick="getvalue()">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</div>
<div id="div2" runat="server">
<radC:RadComboBox ID="rcb1" EnableLoadOnDemand="true" runat="server" Skin="WebBlue">
<Items>
<radC:RadComboBoxItem ID="CondoComboBoxItem" runat="server" Text="A Ground" Value="B" Selected="true" />
<radC:RadComboBoxItem ID="HomeComboBoxItem" runat="server" Text="B Ground" Value="A" />
</Items>
</radC:RadComboBox>
</div>
</fieldset>
function getvalue()
{
var value = $('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val();
if(value == "Yes")
{
if (document.getElementById("<% = div2.ClientID %>") != null)
document.getElementById("<%= div2.ClientID %>").style.display = "inline-block";
}
else
if (document.getElementById("<% = div2.ClientID %>") != null)
document.getElementById("<%= div2.ClientID %>").style.display = "none";
}
when I am using the above code as explained the div2 is displaying first and hiding afterwords which i don't want that.
If i add visible=false to div2 like below
<div id="divTankLocated" runat="server" visible="false">
There is no hide and display of div2, but javascript function getvalue() is not working, and can't display div2 on change of RadioButtonList1 value.
can some body help me in coming across the above 2 points?
At least part of your problem is due to javascript's automatic semicolon insertion.
ex this:
if(value == "Yes")
{
}
is turned into:
ex this:
if(value == "Yes");
{
}
which means that the then section of your if statement is executed every time. In order to prevent it, you have to put your opening {'s on the previous line. Doing that and adding { } pairs to all of your other if statements turns your javascript into this:
function getvalue() {
var value = $('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val();
if(value == "Yes") {
if (document.getElementById("<% = div2.ClientID %>") != null) {
document.getElementById("<%= div2.ClientID %>").style.display = "inline-block";
}
} else if (document.getElementById("<% = div2.ClientID %>") != null) {
document.getElementById("<%= div2.ClientID %>").style.display = "none";
}
}