custom validator client side function
I have a custom validator (.net 3.5) that checks if four dropdown lists in my form have repeated values. It works on the server-side but I would like to add a cli开发者_JS百科ent-side function to go with it. I have no knowledge of JavaScript. Could you help? Mant thanks.
<asp:CustomValidator id="CustomValidator1" runat="server" ErrorMessage = "Same related document was entered more than once" OnServerValidate="dropDownValidation_ServerValidate" Display="Dynamic"></asp:CustomValidator>
Protected Sub dropDownValidation_ServerValidate(ByVal sender As Object, ByVal e As ServerValidateEventArgs)
e.IsValid = Not haveSameValue(DropDownList9.SelectedValue, DropDownList12.SelectedValue) AndAlso _
Not haveSameValue(DropDownList9.SelectedValue, DropDownList15.SelectedValue) AndAlso _
Not haveSameValue(DropDownList9.SelectedValue, DropDownList18.SelectedValue) AndAlso _
Not haveSameValue(DropDownList12.SelectedValue, DropDownList15.SelectedValue) AndAlso _
Not haveSameValue(DropDownList12.SelectedValue, DropDownList18.SelectedValue) AndAlso _
Not haveSameValue(DropDownList15.SelectedValue, DropDownList18.SelectedValue)
End Sub
Protected Function haveSameValue(ByVal first As String, ByVal second As String) As Boolean
If first <> "" And second <> "" AndAlso first.Equals(second) Then
Return first.Equals(second)
End If
End Function
UPDATE: The following JavaScript code works ok as it checks if there are duplicate values in the dropdown lists. However how can I link this to my custom validator and eliminate the alert message. As it stands now the page gets submitted. Thanks.
function dropDownValidation_ClientValidate() {
var strValue1 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList1');
var strValue2 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList2');
var strValue3 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList3');
var strValue4 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList4');
var result = haveSameValue(strValue1.value, strValue2.value) &&
haveSameValue(strValue1.value, strValue3.value) &&
haveSameValue(strValue1.value, strValue4.value) &&
haveSameValue(strValue2.value, strValue3.value) &&
haveSameValue(strValue2.value, strValue4.value) &&
haveSameValue(strValue3.value, strValue4.value);
return result;
}
function haveSameValue(ddlValue1, ddlValue2) {
if (ddlValue1 != null && ddlValue1 != '' && ddlValue2 != null && ddlValue2 != '' && ddlValue1 == ddlValue2){
alert("Related documents contain duplicate values");
}
}
Without using any libraries (such as jQuery), the simplest way is probably this:
HTML:
<select id="dropdown1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="dropdown2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="dropdown3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<select id="dropdown4">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<button id="submitbutton">Submit</button>
JavaScript validator:
var validator = function() {
var objChosenItems = {};
var strDuplicateItem = null;
for (var i = 1; i <= 4; i++) {
var strValue = document.getElementById('dropdown' + i.toString()).value;
if (objChosenItems[strValue]) {
strDuplicateItem = strValue;
break;
}
objChosenItems[strValue] = true;
}
if (strDuplicateItem === null) {
return true;
}
else {
alert("DUPLICATE ITEM: " + strDuplicateItem);
return false;
}
};
You need to wire up validator
to the button, which could be a <input type="submit/image/etc" />
or a <button>
or several other things. Whatever it is, you can just bind the onclick
event to the element. E.g.:
document.getElementById('submitbutton').onclick = validator;
Or
<input type="button" onclick="validator()" />
Or
<form action="mysite.aspx" method="post" onsubmit="validator()">
You need this kind of thing I think:
<asp:CustomValidator id="CustomValidator1" runat="server"
ErrorMessage = "Same related document was entered more than once"
OnServerValidate="dropDownValidation_ServerValidate" Display="Dynamic"
ClientValidationFunction="dropDownValidation_ClientValidate();">
</asp:CustomValidator>
<script type="text/javascript">
function dropDownValidation_ClientValidate() {
var result =
(haveSameValue('<%= DropDownList1.ClientID %>', '<%= DropDownList2.ClientID %>') == false) &&
(haveSameValue('<%= DropDownList2.ClientID %>', '<%= DropDownList3.ClientID %>') == false) &&
(haveSameValue('<%= DropDownList3.ClientID %>', '<%= DropDownList4.ClientID %>') == false) &&
(haveSameValue('<%= DropDownList4.ClientID %>', '<%= DropDownList5.ClientID %>') == false);
return result;
}
function haveSameValue(ddl1, ddl2) {
var result = false;
var value1 = document.getElementById(ddl1).value;
var value2 = document.getElementById(ddl2).value;
if (value1 != null && value1 != '' && value2 != null && value2 != '' && value1 == value2) {
result = true;
}
return result;
}
</script>
Can you check if it works?
This is old, but I wanted to put an answer here, as I got it in response to a Google search for a similar question.
In your Javascript function, it will take 2 parameters, source and args. You want to set args.IsValid to either true or false depending on whether or not validation succeeded or not. args.Value will be the value of the form field being validated if you are validating a specific field.
A simple validator function to check if the form was equal to "1" would look like this:
function validateThis(source, args) {
if (args.Value == "1")
args.IsValid = true;
else
args.IsValid = false;
}
Combine this with the above answers and set args.IsValid rather than the return, and you should have your answer.
More information can be found in this 4guysfromrolla.com article.
精彩评论