How to stop button text change after page load? - javascript

I have a two text box and Enable button.If the data is entered wrongly in the text box on clicking enable button it alerts it.If all the data is correct, on clicking the enable button,text must become disable .The problem is once i click enable it becomes disable for a second then the page loads it again goes to Enable.Can any one tell me what i am doing wrongly .Please provide a example if possible .Thanks in advance
Script to validate and change the button text
function validate
{
var cal1 = document.getElementById('<%=txtEndDate.ClientId%>').value;
var cal2 = document.getElementById('<%=txtStartDate.ClientId%>').value;
var button=document.getElementById('<%=button1.ClientId %>')
if (cal1 == '' && cal2 == '') {
alert("Start Date and End Date can not be left blank ");
return false;
}
if (cal1 == '') {
alert("End Date can not be left blank ");
return false;
}
if (cal2 == '') {
alert("Start Date can not be left blank ");
return false;
}
if (cal1 != '' || cal2 != '')
{
var dt1 = Date.parse(cal1);
var dt2 = Date.parse(cal2);
if (dt1 <= dt2) {
alert("End Date must occur after the Start date ");
return false;
}
}
//if the all the validation are correct it comes to this
if (button.value == "Enable")
button.value = "Disable";
else
button.value = "Enable";
return true;
}
button
<asp:Button ID="button1" OnClientClick=" return validate()" runat="server" Text="Enable" />

Condition will be && in place of || and you pass return false to stop postback
After completing your validation try to return false and use if - else will save your time of validate
function validate()
{
var cal1 = document.getElementById('<%=txtEndDate.ClientId%>').value;
var cal2 = document.getElementById('<%=txtStartDate.ClientId%>').value;
var button=document.getElementById('<%=button1.ClientId %>')
if (cal1 == '') {
alert("End Date can not be left blank ");
return false;
}
else if (cal2 == '') {
alert("Start Date can not be left blank ");
return false;
}
else if (cal1 != '' && cal2 != '')
{
var dt1 = Date.parse(cal1);
var dt2 = Date.parse(cal2);
if (dt1 <= dt2) {
alert("End Date must occur after the Start date ");
return false;
}
else{
//if the all the validation are correct it comes to this
if (button.value == "Enable")
button.value = "Disable";
else
button.value = "Enable";
}
}
return false;
}
and Button - <asp:Button ID="button1" OnClientClick=" return validate();" runat="server" Text="Enable" />

Your problem is that the default action of a click event of an button (<input type="button">) is to submit the form. You can prevent that by returning false from the event handler. the simplest way to do that in your case would be to ALWAYS return false from your validate function.

After completing your validation try to return false
function validate()
{
var cal1 = document.getElementById('<%=txtEndDate.ClientId%>').value;
var cal2 = document.getElementById('<%=txtStartDate.ClientId%>').value;
var button=document.getElementById('<%=button1.ClientId %>')
if (cal1 == '') {
alert("End Date can not be left blank ");
return false;
}
if (cal2 == '') {
alert("Start Date can not be left blank ");
return false;
}
if (cal1 != '' || cal2 != '')
{
var dt1 = Date.parse(cal1);
var dt2 = Date.parse(cal2);
if (dt1 <= dt2) {
alert("End Date must occur after the Start date ");
return false;
}
}
//if the all the validation are correct it comes to this
if (button.value == "Enable")
button.value = "Disable";
else
button.value = "Enable";
return false;
}

Related

Angular JS 24hr time Input Validation

I using HTML5 with AngularJS,i have an input field where i am allowing users to enter the time in 24 hour format eg:(13:00) . when the user clicks on submit button i need to validate whether the input is entered in the above format . If not i would like to throw an error message saying its invalid time . The problem is when i try to do it using normal javascript on ng-click its not working . please suggest me a good way of doing it . How should i do i angular way .
this is my javascript code
function validateTime(obj)
{
var timeValue = obj.value;
if(timeValue == "" || timeValue.indexOf(":")<0)
{
alert("Invalid Time format");
return false;
}
else
{
var sHours = timeValue.split(':')[0];
var sMinutes = timeValue.split(':')[1];
if(sHours == "" || isNaN(sHours) || parseInt(sHours)>23)
{
alert("Invalid Time format");
return false;
}
else if(parseInt(sHours) == 0)
sHours = "00";
else if (sHours <10)
sHours = "0"+sHours;
if(sMinutes == "" || isNaN(sMinutes) || parseInt(sMinutes)>59)
{
alert("Invalid Time format");
return false;
}
else if(parseInt(sMinutes) == 0)
sMinutes = "00";
else if (sMinutes <10)
sMinutes = "0"+sMinutes;
obj.value = sHours + ":" + sMinutes;
}
return true;
}

how to validate multiple textbox for date using javascript

The below code is used to validate start and end date(two textbox and date is selected from calendar)when a button is clicked.The code works fine.The problem is i have 8 more start and end date to validate.so can anyone tell me a common code to validate all the start and end date because of the code length.
function validated() {
var cal1=document.getElementById('<%=EndDateTwo.ClientId%>').value;
var cal2= document.getElementById('<%=StartDateTwo.ClientId%>').value;
if (cal1 == '' || cal2 == '') {
alert("Start Date and End Date can not bleft blank.");
return false;
}
var dt1 = Date.parse(cal1);
var dt2 = Date.parse(cal2);
if (dt1 <= dt2) {
alert("End Date must occur after the Start date ");
return false;
}
return true;
I am using html button to call this
<asp:Button ID="Button2" OnClientClick="return validated();" runat="server" Text="Enable" />
You could create a method validate(cal1, cal2) an call this for each date pair you wan tto validate within the validate() method
If you pass the element IDs into the function then you could reuse it for each pair of dates.
function validated(){
var EndDate1=document.getElementById('<%=EndDate1.ClientId%>').value;
var StartDate1=document.getElementById('<%=StartDate1.ClientId%>').value;
var EndDate2=document.getElementById('<%=EndDate2.ClientId%>').value;
var StartDate2=document.getElementById('<%=StartDate2.ClientId%>').value;
//So on
validatedCommon(EndDate1,StartDate1);
validatedCommon(EndDate2,StartDate2);
//So on
}
function validatedCommon(cal1,cal2) {
if (cal1 == '' || cal2 == '') {
alert("Start Date and End Date can not bleft blank.");
return false;
}
var dt1 = Date.parse(cal1);
var dt2 = Date.parse(cal2);
if (dt1 <= dt2) {
alert("End Date must occur after the Start date ");
return false;
}
return true;

How to check if the selected value of drop-down is set to No and Text-Box is blank using JavaScript

I have drop-down and text-box in a gridview and I am trying to check if the selected value of a drop-down is set to "No" and no comments is entered in the text-box then i want to show message. The requirement should be as long as the selected value of the drop down is set to No then comments must be entered in the text-box. My issue is that i am getting the message even if the drop-down is set to Yes or comments is provided when the drop down is set to No. Here is the code:
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var ddl = gridView.rows[i].getElementsByTagName('Select');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (ddl != null && ddl.length > 1 && ddl[0] != null && areas != null && areas.length > 1 && areas[0] != null) {
if (areas[0].type == "textarea" && ddl[0].type == "select-one") {
var txtval = areas[0].value;
var txtddl = ddl[0].value;
if (txtddl.value == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
alert('Please note that comments is required if drop down is set to No. Thanks');
areas[i].focus();
}
return flag;
}
</script>
You can do like this:
<script>
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
}
}
}
}
if (!flag) {
alert('Please enter comments. Thanks');
}
return flag;
}
</script>
Try this:
$('#select').on('change', function () {
var text = $(this).find(":selected").text();
var textBox = $(this).parent().filter('input [name="InputName"]');
if(text == "no" && textBox.val() =="")
{
\\display your message
}
});

Form validation fails but form gets submitted

I am having trouble validation a form and staying on the same page. Below is my javascript validation which is working as i get popups.
function valueChecks(input){
var reqdFields = false;
var ncFields = false;
var catCheck = false;
var refCheck = false;
var dtCheck = false;
var retval = false;
reqdFields = checkRequiredFields(input) ;
ncFields = checkNonComplianceFields(input);
catCheck = checkCat();
refCheck = checkRef();
dtCheck = subDate();
var mesgNo="0";
if (reqdFields == true){
mesgNo="0";
} else { mesgNo="1";
}
if (catCheck == true){
mesgNo=mesgNo+"0";
} else { mesgNo=mesgNo+"2";
}
if (refCheck == true){
mesgNo=mesgNo+"0";
} else { mesgNo=mesgNo+"3";
}
if (dtCheck == true){
mesgNo=mesgNo+"0";
} else { mesgNo=mesgNo+"4";
}
if (ncFields == true){
mesgNo=mesgNo+"0";
} else {mesgNo=mesgNo+"5";
}
if (mesgNo =="00000"){
retval=true;
}
else if ((mesgNo =="10000")||(mesgNo =="12000")||(mesgNo =="12300")||(mesgNo =="12340")||(mesgNo =="12345")||(mesgNo =="10300")||(mesgNo =="10340")||(mesgNo =="10040")){
retval = false;
alert("Please check that you have filled in all the Mandatory Fields");
}
else if ((mesgNo =="02000")||(mesgNo =="02300")||(mesgNo =="02040")||(mesgNo =="02340")||(mesgNo =="02345")){
retval = false;
}
else if ((mesgNo =="00300")||(mesgNo =="00340")||(mesgNo =="00345")){
retval = false;
alert ("Please enter at least one Reference Value (File Number, STT or BL Number)");
}
else if ((mesgNo =="0004")||(mesgNo =="00045")){
retval = false;
alert ("The Incident Date must be less than or equal today's Date");
}
else if ((mesgNo =="0005")){
retval = false;
alert ("Please enter at least one Non Conforming Party");
}
return retval;
}
And this is how i declare my form.
<html:form action="/qaeditsrl" onsubmit="return valueChecks(this);" >
<input type=submit value="Submit" name="method" >
Can someone tell me why this is going wrong?
Try changing the submit button to input type=button.
Remove the onsubmit on the form, and add an id.
Then add onclick on the button doing all the checks,
if no errors were found use document.getElementById('formId').submit() for submitting;

Date Validation not working using JavaScript

I have two two date fields - from date and to date, and i need to validate 3 things
Both the values are entered or not
Date datatype check
To date must be greater than from date.
But my script is not working.
can some body please check?
Thanks
function checkBothDates(sender,args)
{
var from = document.getElementById(sender.From);
var to = document.getElementById(sender.To);
var behaviorId = sender.behavior;
var from_value = from.value;
var to_value = to.value;
if((from_value == "")&&(to_value == ""))
{
args.IsValid = true;
}
else
{
if((from_value != "")&&(to_value != ""))
{
if((isValidDate(from_value))&&(isValidDate(to_value)))
{
if(from_value < to_value)
{
args.IsValid = false;
sender.errormessage = "To date must be greater than or equal to the from date";
}
}
else
{
args.IsValid = false;
sender.errormessage = "Please enter valid dates in both the fields";
if(behaviorId != null)
{
openCollapsiblePanel(behaviorId);
}
}
}
else
{
args.IsValid = false;
sender.errormessage = "Please make sure you enter both the values";
if(behaviorId != null)
{
openCollapsiblePanel(behaviorId);
}
}
}
}
function isValidDate(val)
{
var format = 'dd/MM/yyyy'
var regexp = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if (!regexp.test(val))
{
return false;
}
else
{
try
{
$.datepicker.parseDate(format,val,null);
return true;
}
catch(Error)
{
return false;
}
}
}
Your code is pretty repetitive, you can shorten a lot of it.
Also note that the regex check is entirely unnecessary, since $.datepicker.parseDate() won't accept anything invalid anyway.
function checkBothDates(sender, args) {
var from = parseDate( $(sender.From).val() ),
to = parseDate( $(sender.To).val() );
args.IsValid = false;
if (from == "" && to == "" || from && to && from <= to) {
args.IsValid = true;
} else if (from == null || to == null) {
sender.errormessage = "Please enter valid dates in both the fields";
} else if (from > to) {
sender.errormessage = "To date must be greater than or equal to the from date";
} else {
sender.errormessage = "Please make sure you enter both the values";
}
if (!args.IsValid && sender.behavior) {
openCollapsiblePanel(sender.behavior);
}
}
function parseDate(val) {
if (val == "") return "";
try {
return $.datepicker.parseDate('dd/MM/yyyy', val);
} catch (ex) {
return null;
}
}
There is a problem in your code aroun the 19th line. You wrote:
if(from_value < to_value) {
args.IsValid = false;
sender.errormessage = "To date must be greater than or equal to the from date";
}
But you definitely want that from_value is smaller then to_value. Fix it!

Categories