I would like to style all the empty textboxes,by adding a class on validation (ie on Submit), but my code isn't working. Not sure if its the script or the customvalidator. I only want to use JS. If I say
target.style.border="1px solid red";
its working though. Just unable to add the class.
JS:
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function validateTextBox(sender, args) {
var target = document.getElementById(sender.controltovalidate);
var is_valid = target.value != "";
if (is_valid) {
target.removeClass("validate");
}
else {
target.addClass("validate");
}
args.IsValid = is_valid;
}
</script>
ASPX:
<asp:TextBox ID="txtSurname" runat="server"></asp:TextBox>
<asp:CustomValidator ID = "CustomValidator1" runat="server"
ControlToValidate="txtSurname" ValidateEmptyText="true"
ClientValidationFunction="validateTextBox"
></asp:CustomValidator>
CSS:
.validate
{
border:2px solid red;
}
document.getElementById returns a DOM element, which does not have addClass or removeClass APIs.
see: Element
To apply class, try (putting the idea, please tweak according to exact business logic):
target.className = target.className + " validate"
If we go with raw JS, we have to write raw code and forget luxuries of addClass or removeClass :-) To remove class, see this answer: Remove class using javascript
try this...
function validateTextBox(sender, args) {
var target = document.getElementById(sender.controltovalidate.ClientID);
if (target.value != "") {
target.removeClass("validate");
}
else {
target.addClass("validate");
}
args.IsValid = "";
}
Try this. Simple way .
function validateTextBox() {
var target = document.getElementById("#<%= txtSurname.ClientID %>");
**var is_valid = target.value;**
**if (is_valid!="") {**
target.removeClass("validate");
**return true;**
}
else {
target.addClass("validate");
**return false**
}
}
ASPX:
<asp:TextBox ID="txtSurname" runat="server"></asp:TextBox>
<asp:CustomValidator ID = "CustomValidator1" runat="server"
ControlToValidate="txtSurname" ValidateEmptyText="true"
ClientValidationFunction=**"Javascript:return validateTextBox()"**
></asp:CustomValidator>
Maybe you would like to use jquery validation plugin ? This is widely used plugin.
<asp:TextBox ID="txtSurname" runat="server" CssClass="toValidate"></asp:TextBox>
jQuery(function() {
// You can specify some validation options here but not rules and messages
jQuery('form').validate();
// Add a custom class to your name mangled input and add rules like this
jQuery('.toValidate').rules('add', {
required: true
});
});
This code should check if textbox are empty before form submition.
change var target = document.getElementById(sender.controltovalidate.ClientID);
to: var target = document.getElementById(sender.ClientID);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.