I have a regex in a javascript that is checked onclientclick. The code I have below works properly if the first check is false, I have a message displayed and it stops before submitting as I would like it to. However, if the first validation checks fine, I want it to check the next set of validations but it just skips the rest and submits. Am I missing something here?
<script type="text/javascript">
function checkall() {
var isValid21 = false;
var regex21 = /(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]/;
isValid21 = regex21.test(document.getElementById("TimeTest").value);
document.getElementById("spnError21").style.display = !isValid21 ? "block" : "none";
document.getElementById("TimeTest")
return isValid21;
var isValid2 = false;
var DDLOne = document.getElementById("DropDownA");
if (DDLOne.value == "") {
document.getElementById("spnError2").style.display = !isValid2 ? "block" : "none";
document.getElementById("DropDownA")
return false;
}
var submit = 0;
if (++submit > 1) {
alert('Give me a second.');
return false;
}
return true;
}
</script>
<asp:Button ID="Button1" runat="server" Text="Submit" onclientclick="return checkall();" OnClick="Button1_Click" />
Your code is returning immediately after the first check, which is why the second one is never checked. You'll need to change your code to return an aggregate of the two "checks" at the end of your function. Also, your submit variable is declared inside the scope function, which means it will always get initialized to 0. I think you need to declare that outside your function. In addition, what are those empty document.getElementById("...") calls for? They dont do anything. Finally, you are returning true at the very end of your function. You'll need to tweak your logic rules and return the aggregate of isValid21 and isValid2 at the end. You'll have to do the tweaking yourself, as we don't know the required business rules.With all that, I'm not sure that this logic is sound, but this should at least get you going in the right direction:
var submit = 0;
function checkall() {
var isValid21 = false;
var isValid2 = false;
var regex21 = /(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]/;
isValid21 = regex21.test(document.getElementById("TimeTest").value);
document.getElementById("spnError21").style.display = !isValid21 ? "block" : "none";
var DDLOne = document.getElementById("DropDownA");
if (DDLOne.value == "") {
document.getElementById("spnError2").style.display = !isValid2 ? "block" : "none";
isValid2 = false;
}
if (++submit > 1) {
alert('Give me a second.');
isValid2 = false;
}
//SOME OTHER LOGIC RULES THAT CHANGE isValid2 TO TRUE...
//YOU WILL NEED TO DO SOME ADDITIONAL LOGIC TWEAKING BEFORE THIS LINE. AS IT STANDS NOW, THIS WILL ALWAYS RETURN FALSE.
return isValid21 && isValid2;
}
Related
So I'm working on a school coding project and I'm having trouble disabling a function when a particular button is pressed. I assumed a return command would be the best way to go but my code doesn't seem to be doing the job. Here's an example of the code I tried:
var x = false;
onEvent("button","click",function(){
`` x = true;
newScreen();
});
if(x == true){
return false;
}else{
return true;
}
}
This is taken from the end of a function. Does the if statement have to be directly connected to the function (placed right at the top)? If so, how would I go about coding the function where if it's true, run the code but if it's false, don't (if that makes sense)?
var x = false;
onEvent("button","click",function(e){
if(x === true) {
e.target.disabled = true;
e.preventDefault();
e.stopPropagation();
return;
}
x = true;
newScreen();
});
I've been trying to get this working for days and am just going around in circles, no matter what resource I read. I think I'm going to have a ton of errors in my code but I just can't figure it out.
I've got a form that I'm wanting to break down into smaller parts, on the click of a next button it will validate all the data in that section then hide it and show the next section. I've also got the issue of my form adds in sections depending on if the person has a partner or children. I'm not sure on how to handle that so would really appreciate some tips.
Here's my validation function, the jfiddle for the full code is below
$(".next").click(function() {
$('#travelform').find(":visible").find("input[required]").each(function(){
var myPattern = $(this).attr('pattern');
var myPlaceholder = $(this).attr('placeholder');
var isValid = $(this).val().search(myPattern) >= 0;
var isEmpty = true;
var abort = false;
$("div.error").remove();
//traverse through each required field to ensure it's been filled in
$(':input[required]').each(function() {
if($(this).val()==='') {
$(this).after('<div class="error">This is a required field</div>');
abort = true;
}
});
if (abort) { return false;} else {return true;}
});
});
Fiddle: https://jsfiddle.net/gq4kyhs3/
Why don't you add a class to all the inputs that have been validated and have a value and then check for this each time next is pressed like this:
$(".next").click(function() {
$('#travelform').find(":visible").find("input[required]").each(function(){
var myPattern = $(this).attr('pattern');
var myPlaceholder = $(this).attr('placeholder');
var isValid = $(this).val().search(myPattern) >= 0;
var isEmpty = true;
var abort = false;
$("div.error").remove();
//traverse through each required field to ensure it's been filled in - Added this check in to see if it has already been checked...if not then continue...
if ($(this).hasClass('checked-and-filled') {
$(':input[required]').each(function() {
if($(this).val()==='') {
$(this).after('<div class="error">This is a required field</div>');
abort = true;
} else {
// if the value is not empty then we know its been checked and it has a value
addClass('checked-and-filled');
}
});
if (abort) { return false;} else {return true;}
}
});
Also a quick comment about your HTML. I noticed this in your fiddle but I think you might have this error in your actual code...
On all of the part sentences you start with a h3 tag but end with a h2:
<h3 class="center">Part 1 of 5</h2>
When the program starts a modal opens and I want it to disable a button within the modal if the 9 entries of the form are filled in but despite finding the button and the modal document.getElementById('pE').elements.item(n).value was returning as if it was not finding it. I forget what I did to get the error to go away but now the code is not working. the while loop is not running because when i removed the (document.getElementById("ManuSub").disabled = false;) the button did not go disabled but all of the other programs and functions I have program work. What adjustment do I have to make to make this program work.
window.onload = function(){
var n = 0
var formName = document.getElementById('pE')
document.getElementById('myModal').style.display = "block"
while((n<=9) && (formName.elements.item(n).value === undefined)){
document.getElementById("ManuSub").disabled = true;
for(n=0;n<9;n++){};
}
document.getElementById("ManuSub").disabled = false;
}
Edit: I fixed my stated above issue I think with this code but now my program is not even loading which I believe is because of the while loop.
window.onload = function(){
document.getElementById('myModal').style.display = "block"
var n = 0
var formName = document.getElementById('pE')
while(n<=8){
setTimeout(5000,function(){if(formName.elements.item(n).value == '') {
document.getElementById("ManuSub").disabled = true;
n=n+1
}
if(formName.elements.item(8).value == ''){
n = 0
}
});
}
}
I am very new to JS, but am trying to create a checkbox that when checked will reveal a div with an id of "second_row", and when unchecked will hide it (unchecked by default). Am I missing some code? Is my syntax incorrect? I could really use some help. Thanks for givin a newbie a hand!
Html:
<input type="checkbox" name="under_18" id="under_18" class="check" value="under_18" form="contest_form" onclick="parentsCheck()" />
JavaScript:
<script>
function parentsCheck()
{
var check1 = document.getElementById('under_18'),
if (check1.checked === true) {
document.getElementById('second_row').style.display = 'block';
}
else if (check1.checked === false) {
document.getElementById('second_row').style.display = 'none';
}
}
</script>
P.S. Dont know if it matters, but the checkbox is in a table cell.
Your , at the end of the var statement should be a ;.
It's causing a SyntaxError, causing the JavaScript block to be effectively ignored, so parentsCheck() is never defined.
var check1 = document.getElementById('under_18');
http://jsfiddle.net/tYv28/
As an aside, check1.checked will always return a boolean, so you don't need to do the === true and === false comparison; the following will work just fine:
function parentsCheck()
{
var check1 = document.getElementById('under_18');
if (check1.checked) {
document.getElementById('second_row').style.display = 'block';
} else {
document.getElementById('second_row').style.display = 'none';
}
}
When using event handler attributes, JavaScript only recognizes functions in the global scope. Try defining the event handler in your JavaScript, which also has the benefit of being unobtrusive:
var el = document.getElementById('under_18');
el.onclick = parentsCheck; // <---- This
jsFiddle
Also, you need to change the , into a ;.
I have a javascript function like this:
function validateInput() {
var search_text = document.getElementById('search_text').value;
var size = document.getElementById('size').value;
var submitButton = document.getElementById('sb_search');
document.getElementById('sb_search').disabled=false;
var filter = /^[\x20-\x7E]*$/;
if (filter.test(search_text) && search_text.length>0){
return true;
}
else{
submitButton.setAttribute('disabled');
}
}
Once I press the submit button without value and without satisfying the regex the button is not submitted after that.
you are disabling the submit button when the input is zero or not as per the regex !
also you are not returning true which is holding it from submition !
put a return false in the else condition.
instead of document.getElementById('sb_search').disabled=false; try
document.getElementById('sb_search').removeAttribute('disabled')
Put return false in else statement
function validateInput() {
var search_text = document.getElementById('search_text').value;
var size = document.getElementById('size').value;
var submitButton = document.getElementById('sb_search');
document.getElementById('sb_search').disabled=false;
var filter = /^[\x20-\x7E]*$/;
if (filter.test(search_text) && search_text.length>0){
return true;
}
else{
submitButton.setAttribute('disabled');
return false;
}
}
That's because search_text.length == 0 and thus you fall into the else and disable the submit button