exceedinglife

I now have it solved what I needed to do what return false on each validation instead of having isvalid = false because it was overwriting it at the end.

It always returns TRUE I'm not sure why I stepped through the JS and the validregister() returns isvalid = false so why on the if(validreg()) it returns true... I have if(validreg()){alert("valid");}else{alert("Invalid");} Its always valid

$("#btnRegister").click(function (e) { e.preventDefault(); if (validateRegistration()) { calltest(); function validateRegistration() { var email = $("#txtEmail").val(); var password = $("#txtPassword").val(); var password2 = $("#txtPassword2").val(); var isValid = false; var alertText = ""; var genericAlert = '<div class="alert alert-danger alert-dismissible fade show" role="alert"><button type="button" ' + 'class="close" data-dismiss="alert" aria-label="Close" aria-hidden="true">&times;</button>'; // EMAIL VERIFICATION if (email != "") { var emailRegex = "[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"; if (email.match(emailRegex)) { isValid = true; } else { alertText = "Email is not in the correct format."; emailFormatAlert = genericAlert + alertText + '</div>'; $("#alertArea").append(emailFormatAlert); isValid = false; } } else { //alert("Email cannot be empty."); + '</div>' alertText = "Email cannot be empty."; emailAlert = genericAlert + alertText + '</div>'; $("#alertArea").append(emailAlert); isValid = false; } // PASSWORD VERIFICATION if (password != "") { if (password.length < 5) { $("#alertPass").show(); isValid = false; } else { isValid = true; } } else { alertText = "Password cannot be empty."; passwordAlert = genericAlert + alertText + '</div>'; $("#alertArea").append(passwordAlert); isValid = false; } // PASSWORD MATCH if (password != password2) { alertText = "Passwords do not match!"; pass2Alert = genericAlert + alertText + '</div>'; $("#alertArea").append(pass2Alert); isValid = false; } else { isValid = true; } return isValid; } Hello all, My $.ajax() is running even when my validateRegistration() is invalid. My validateRegistration() is registering true wether its valid or invalid. Could someone look at this method and let me know if they see anything wrong with it.

$(myForm).on("submit", function(e){ if (validateit()){ //created message and displayed in a div } else { e.preventDefault(); } }); function validateit(){ //Do your validations //Return true or false if true document.forms["formsignin"].submit(); } not valid I display a message saying unsuccessful and I display why its not valid. I wanted to do this in only JavaScript and not using the jQuery selectors. Is there a way I can call this in purely JavaScript and not jQuery $(myForm).on("submit", function(e){

Hello all, I have a quick question that should actually be really simple but I haven’t been able to find it online through MANY searches. I have an HTML form and a submit button. In the form I have an ‘onsubmit()’ event which does validation. How do I call a submit function after I return my onsubmit value if true do ‘thissubmit()’ I currently have a onsubmit function() If my function returns true then I call - document.forms["formsignin"].submit(); return true; That goes to my jQuery ‘$(myForm).on("submit", function () {}’ I want to do this in JavaScript ONLY and NOT with the $( myform).on() jQuery way. <form id="fsignin" onsubmit="return validateit();"> ... <button type=”submit”>Sign in</button> </form> Function validateit() { do validation stuff if(….){document.forms["formsignin"].submit(); return true; } } $(myForm).on("submit", function () { if (validateit()) {} }

Moving index-- and index++ to the beginning fixed that issue.

I know it has something to do with the placement of my "index--"

Now I found an error array index undefined. How can I have it so when i click the btn and its at index 0 it wont go to -1 but i need to be able to click the btn to do index-- to view the next slot in the array. $("#back").click(function() { if (index < 0) { index = 0; } else { var first = arr[index]; $("#sec2").html('<h5>'+first.id+'</h5>'); index--; } });

I got it all figured out im not sure why I was having such troubles last night lol probably was just tired and not thinking clearly. It was actually pretty easy when I took time and thought about it. $("#back").click(function() { if (index < 0) { index = 0; } var first = arr[index]; $("#sec2").html('<h5>'+first.id+'</h5>'); index--; });

Sorry about the extra " I was removing my bootstrap part before adding it to the form list += '<li class="list-group-item">'+this.id+' ' That sounds exactly like what I want to do. I want to have a bootstrap table that highlights the selected element in the array I will look into data-index and data-selected Can I use data-index and data-selected in a javascript array? I have the array built

Hello all, I have an array and I would like to loop through it with buttons. I have a back and forward button. I wanted to have some kind of index so I can use it as a counter and ++ or -- to pick the index but everytime I try to insert the array[index] into my html it gives me an error. $(document).ready(function() { var arr = []; var index = 0; var list = ""; $("#btndis").click(function() { $.each(arr, function() { list += '<li">'+this.id+' '+this.name</li>'; }); $("#section").append(list); }); $("#back").click(function() { //var s = arr[index]; var first = arr.first(); //$("#sec2").innerHTML(<span>first</span>); }) });

Hello all, I have a bootstrap 3 modal and I want to use bootstrap 4 to make it work the same way. I have tried quiet a few different ways to make this work I am trying to use something like the fadein fadeout and fadetoggle methods but in bootstrap4 they don’t have these. I tried .modal(show) and .modal(toggle) I just need to change the content to the next content <p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#modalLogin">Open Login Modal</a></p> <div class="modal fade" id="modalLogin" role="dialog" tabindex="-1" aria-labelledby="ModalLabelScreen" aria-hidden="true" "> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header" align="center"> <!-- look for class=img-circle but diff shapes bootstrap--> <img id="bootstrap_logo" class="rounded mx-auto d-block" src="img/bootstrap-4.png" /> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span class="glyphicon glyphicon-remove" aria-hidden="true">&times;</span> <!-- TODO glyphicons > --> </button> </div> <!-- Building DIV Form --> <div id="div-forms"> <!-- Building Login Form --> <form id="formLogin"> <div class="modal-body"> <div id="loginMsg"> <div id="iconLoginMsg" class="glyphicon glyphicon-chevron-right"></div> <!--<i class="fas fa-user prefix grey-text"></i>--> <!--<i class="fab fa-twitter"></i>--> <span id="textLoginMsg">Enter your Username and Password.</span> </div> <input type="text" id="txtUsername" class="form-control" placeholder="Username (type ERROR for error effect)" required /> <input type="password" id="txtPassword" class="form-control" placeholder="Password" required /> <div class="checkbox"> <label> <input type="checkbox" />Remember me </label> </div> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button> </div> <div> <button type="button" id="btnLostPassword" class="btn btn-link">Lost Password?</button> <button type="button" id="btnRegister" class="btn btn-link">Register</button> </div> </div> </form> <!-- End of Login Form --> <!-- Building Lost Password Form --> <form id="formLost" style="display:none;"> <div class="modal-body"> <div id="lostMsg"> <div id="iconLostMsg" class="glyphicon glyphicon-chevron-right"></div> <span id="textLostMsg">Enter your email address.</span> </div> <input type="text" id="txtLostEmail" class="form-control" placeholder="Email (type ERROR for error effect)" required /> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button> </div> <div> <button type="button" id="btnPasswordLogin" class="btn btn-link">Log In</button> <button type="button" id="btnPasswordRegister" class="btn btn-link">Register</button> </div> </div> </form> $(function () { var $formlogin = $("#formLogin"); var $formlost = $("#formLost"); var $formregister = $("#formRegister"); var $divforms = $("#div-forms"); var $modalanimatetime = 300; var $msganimatetime = 150; var $msgshowtime = 2000; $("form").submit(function () { switch (this.id) { case "formLogin": var $lusername = $("#txtUsername").val(); var $lpassword = $("#txtPassword").val(); if ($lusername == "ERROR") { messageChange($("#loginMsg"), $("#iconLoginMsg"), $("#textLoginMsg"), "error", "glyphicon-remove", "Login error"); } else { messageChange($("#loginMsg"), $("#iconLoginMsg"), $("#textLoginMsg"), "sucess", "glyphicon-ok", "Login OK"); } return false; break; case "formLost": var $loemail = $("#txtLostEmail").val(); if ($loemail == "ERROR") { messageChange($("#lostMsg"), $("#iconLostMsg"), $("#textLostMsg"), "error", "glyphicon-remove", "Send error"); } else { messageChange($("#lostMsg"), $("iconLostMsg"), $("#textLostMsg"), "success", "glyphicon-ok", "Send OK"); } return false; break; function modalSwitch($oldForm, $newForm) { var $heightOld = $oldForm.height(); var $heightNew = $newForm.height(); $divforms.css("height", $heightOld); //$oldForm.modal("hide"); $oldForm.modal("toggle"); //$newForm.modal("show"); $newForm.modal("toggle"); } $("#btnRegister").click(function () { modalSwitch($formlogin, $formregister); });//{ modalAnimate($formlogin, $formregister); }); $("#btnLostPassword").click(function () { modalAnimate($formlogin, $formlost); }); $("#btnRegisterLogin").click(function () { modalAnimate($formregister, $formlogin); }); $("#btnRegisterLost").click(function () { modalAnimate($formregister, $formlost); }); $("#btnPasswordLogin").click(function () { modalAnimate($formlost, $formlogin); }); $("#btnPasswordRegister").click(function () { modalAnimate($formlost, $formregister); }); function modalAnimate($oldForm, $newForm) { var $heightOld = $oldForm.height(); var $heightNew = $newForm.height(); $divforms.css("height", $heightOld); $oldForm.fadeToggle($modalanimatetime, function() { $divforms.animate({ height: $heightNew }, $modalanimatetime, function() { $newForm.fadeToggle($modalanimatetime); }); }); } function messageFade($msgId, $msgText) { $msgId.fadeOut($msganimatetime, function() { $(this).text($msgText).fadeIn($msganimatetime); }); } function messageChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $messageText) { var $oldMsg = $divTag.text(); messageFade($textTag, $messageText); $divTag.addClass($divClass); $iconTag.removeClass("glyphicon-chevron-right"); $iconTag.addClass($iconClass + " " + $divClass); setTimeout(function() { //calll messageFade($textTag, $oldMsg); $divTag.removeClass($divClass); $iconTag.addClass("glyphicon-chevron-right"); $iconTag.removeClass($iconClass + " " + $divClass); }, $msgshowtime); }

Yes I know I asked this... This is my problem.. In my switch case is there a way i could have the case go off of id or something.. I have : $(":input").blur(function () { let controlType = this.type; switch (controlType) { case "text": case "password": My email textbox is type="text" I want one of the cases to somehow link that specific type=text textbox to a different case So i could have it go to my method I made for validating email.

Hello all, I am validation off bootstrap currently so it validates all $(“:input”) and I use a switch statement so it does case “text” case “password” and case “textarea” I want to validate a case “email” or by the #ID and have it be with the same CSS of of a textbox. Because I have floating labels for when the textboxes and textareas are in focus. In focus their labels move on top of them. Not in focus if empty label moves back to looking like its inside of it. Everything works properly EXCEPT my EMAIL textbox. I want the validate to work for an email address but if I set the switch case to email if the email is not in correct format the label moves back to looking like its inside the textbox so BOTH the LABEL and content is in the text box. I want it so if something is in the email textbox the label STAYS on top (translate3d) I could use JavaScript, JQuery, or CSS. Here is what I have. /*<!—HTML -->*/ <div class="row "> <div class="col-md-6 "> <div class="md-form mb-0 "> <input class="form-control" type="text" id="txtName" name="txtName" required /> <label for="txtName">Your Name </label> </div> </div> <div class="col-md-6 "> <div class="md-form mb-0 "> <input class="form-control" type="text" id="txtEmail" name="txtEmail" required /> <label id="lblEmail" for="txtEmail">Your Email Address </label> </div> </div> </div> /* CSS */ .md-form { position: relative; margin-top: 1rem; } .md-form .form-control { margin: 0 0 .5rem 0; padding: .3rem 0 .55rem 0; height: auto; } .md-form label { position: absolute; letter-spacing: .05em; padding-left: 5px; top: .65rem; transition: .2s ease-out; cursor: text; color: #757575; } .md-form .form-control:focus { border-bottom: 3px solid #181846; } .md-form .form-control:focus + label, .md-form .form-control:valid + label { font-size: 85%; font-weight:700; transform: translate3d(0,-150%, 0); color: #181846; cursor: pointer; } /* JavaScript / jQuery */ // Validate :inputs $(":input").blur(function () { let controlType = this.type; switch (controlType) { case "text": case "password": case "textarea": validateText($(this)); break; case "email": validateEmail($(this)); break; default: break; } }) // each :input focusin remove existing validation messages if any. $(":input").click(function () { $(this).removeClass("is-valid is-invalid"); }) /* OPTIONAL ':input' KEYDOWN validation messages remove */ // Reset Form and remove all validation messages. $(":reset").click(function () { $(":input").removeClass("is-valid is-invalid"); $(form).removeClass("was-validated"); }) // Validate Text Function function validateText(control) { let textField = control.val(); if (textField.length > 1) { $(control).addClass("is-valid"); } else { $(control).addClass("is-invalid"); } } // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/ ) function validateEmail(control) { let textField = control.val(); let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i; if (regexPattern.test(textField)) { $(control).addClass("is-valid"); } else { $(control).addClass("is-invalid"); } }

I got everything working now error: function (errorThrown) { //here is the status error code xhr, status, console.log(errorThrown); alert(errorThrown); I used this to find out what bugs I was getting. I debugged everything now It works as I wanted it to. I do have a new question though about something else. Its something with css or Javascript so I will make a new post. Thanks all for the help on this topic.