How to validate present checkboxlist in a asp.net page - javascript

I have a asp.net page which has checkboxlists and radiobuttonlist. The problem is not all the checkbox list and radiobutton list are visible all the time. some are hidden some are displayed depending on the logic. At the end i have a button to submit that will do something at the server side. How can i do required field validation the all controls using javascript. i tried asp.net validation controls. What happens is it gives me error when no value is selected and right after when i provide values then it doesn't do anything and doesn't gives any error. autopost back is enabled in each control becoz i am capturing the value and storing it in server side. i have a javascript code but it works for only one control at a time.
How can i use it for all the controls present in the curernt page.
<script type = "text/javascript">
var atLeast = 1
function Validate()
{
var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var counter=0;
for (var i=0;i<checkbox.length;i++)
{
if (checkbox[i].checked)
{
counter++;
}
}
if(atLeast>counter)
{
alert("Please select atleast " + atLeast + " item(s)");
return false;
}
return true;
}
</script>

Related

Show alert for HTML5 required field validation for no longer visible input

I've got a multiple step form, so when I finally come to the submit button, many of the required inputs are no longer visible for the user, therefore the HTML5 alert can't be apreciate by the user. There's a way to show an alert telling what input is incomplete?
JavaScript example:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("The form is incomplete");
return false;
}
}
It's explained here: https://www.w3schools.com/js/js_validation.asp

Navigate to element in Different tab of same page using focus() function

I am doing validation of entire form which is spread into different section where each section is a nav-tab , when i fill the entire form and cursor is in the last section, on clicking the save button if there is a validation mismatch of textbox in first section(first nav-tab) and if i want the user to be focused to the failed textbox document.getElementById(ID).focus()
is not navigating to the element where validation has failed.
How to achieve the above functionality??
function validate()
{
var valid = true;
var alphaFilter = /^[A-z]{0,}$/;
if (!(alphaFilter.test($('#fieldId').val()))
{
if(valid){$('#fieldId').focus();}
$('#fieldId').css("border-color", "#e84e40");
valid = false ;
}
--- each field has its own if condition
return valid;
}
validate function is called inside the submit function for further processing and valid variable is used to focus first invalid entry in the form.
I would make a param to take in selectors to make this more usable.
Something like this..
function switchtab (){
$("#tab1").removeClass("active");
$("#tab2").addClass("active");
$("#tabpanel1").removeClass("active");
$("#tabpanel2").addClass("active");
//should be good to focus now
$(selector).focus();
}

Text of textbox doesn’t update in submit button click

I have two radiobutton. If one of them be checked a textbox be active and get data.
They are in update page. In page-load fill them by data from database and I check ispostback.
If textbox have text in page load, its text change and everything work fine but if it haven’t text in first place, it keep default text and doesn’t update in submit button click.
String val = "0";
if (radiobutton2.Checked && textbox1.Text.Length != 0)
val = textbox1.Text;
in page load use this code for initialize radiobuttons:
t.ReadOnly = true;
t.BackColor = System.Drawing.Color.Gray;
and there's a javascript code for active and inactive this textbox
function CheckedChanged(rbtnelement, txtelement) {
if (document.getElementById(rbtnelement).checked) {
document.getElementById(txtelement).readOnly = false;
document.getElementById(txtelement).style.backgroundColor = "white";
}
else {
document.getElementById(txtelement).readOnly = true;
document.getElementById(txtelement).style.backgroundColor = "grey";
}
}
It’s because the textbox readonly property become false in c# code (it run in server side) and it become true in javascript (it run in client side). In server side (c# codes) textbox remain readonly and don’t send its text.
if remove one of them and manage textbox in one side (client or server) it will work fine.

JavaScript Form Validation Query

I've just wrote some validation code so as to check if either of my radio buttons from my web form have been selected before they are submitted. I've just starting learning php as I want to be able to store the value of each radio button in a .csv file.
Because I have my action attribute set to trigger a php script, I get my alert box, but as soon as I click OK after pressing submit the browser goes straight to the php script (inevitably).
Is there a way I can return to my initial index.html after the alert message?
I have not actually written any php as yet, so would this go in the php script or the javascript?
Heres my code so far:
$("#submit").on("click", function() {
var radio = $("input[type=radio][name=emotion]")[0].checked;
var radio2 = $("input[type=radio][name=emotion]")[1].checked;
var radio3 = $("input[type=radio][name=emotion]")[2].checked;
if(!radio && !radio2 && !radio3) {
alert("You must select at least one word!");
}
else {
alert("Please rate the next item!")
}
});
In Jquery you should use .submit() function to validate a form.
Then to avoid to submit the form you can use the function event.preventDefault()
And if you want to go to the index you can use window.location = "yourURL"
You must use form.onsubmit().
For example, if your form's name is myForm:
document.forms['myForm'].onsubmit = function()
{
if (this.elements['emotion'].value)
{
alert("Please rate the next item!");
}
else
{
alert("You must enter at least one word!");
return false;
}
}
And after alert "Please rate the next item!" form will be send.
Actually you can use jquery $.post() , an easy solution is just to post your php page without leaving index page.
http://api.jquery.com/jquery.post/
$.post( "yourpage.php" );
You probably have the input type of the submit button as submit? Set this to button, so the action doesn't take place and only jQuery is executed.
But then you have to submit the form by jQuery when validation was successful:
document.myFormId.submit();

Disable form submission if a field has invalid values

I have a html form with multiple textboxes. Each textbox can accept only integers.
I am using dojo NumberTextBox to validate this.
But the problem is, even if a textbox is in error, only an error tooltip is displayed but the user can still press the submit button.
Is there a way to disable the submit button if any textbox is in error?
You need to have a custom submit button.
<button onClick='submitForm("NAME OF FORM")' value='Submit'>
<Script>
function submitForm(name) {
var bad = 0;
for(Loop through values) {
if(isNaN(num)) {
bad = 1;
}
}
if(bad==0) {
document.forms[name].submit();
}
}
</script>

Categories