We Keep Coding

How can I make a pop up window (alertbox) if the input isn't valid? [duplicate]

This question already has answers here:
A simple jQuery form validation script [closed]
(2 answers)
Closed 5 years ago.
Basically what i'm trying to do is that when i hit a button, it will check if something has been written, if it hasn't I would like an alert box to appear. Is this possible? Down below is what I have so far, any tips? (#inputvalue is the id of the values when writing. I created a new function for the process called validateForm. Is this possible to do in Jquery? I supose that what I wrote is more Javascript, because that's mostly what i'm used to...). //Nathalie!
function validateForm() {
var x = document.forms["#inputValue"].value;
if ("#inputValue" == "") {
alert("Name must be filled out");
return false;
}
}

Provided that you use jQuery (as you have tagged your question) you could try something like this:
$(function(){
function validateForm(){
var ele = $("#inputValue");
if(!ele.val()){
alert("Name must be filled out")
}
}
$("#btnId").on("click", validateForm);
});
$(function(){
function validateForm(){
var ele = $("#inputValue");
if(!ele.val()){
alert("Name must be filled out")
}
}
$("#btnId").on("click", validateForm);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="inputValue"/>
<input type="button" id="btnId" value="submit"/>

Sure, using the code you provided, you just need to target #inputValue properly and use that value in your test.
function validateForm() {
var x = document.getElementById('inputValue').value;
if (x.trim() == "") {
alert("Name must be filled out");
return false;
}
}
<form onsubmit="validateForm()">
<input id="inputValue" type="text">
<input type="submit">
</form>
Using jquery, it's basically the same thing. Here's an example using a submit handler in jquery instead of an onsubmit attribute in html, and using jquery selectors.
$('form').on('submit',function(e) {
var x = $('#inputValue').val();
if (x.trim() == "") {
alert("Name must be filled out");
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="inputValue" type="text">
<input type="submit">
</form>

In addition to what Michael Coker said, it would be better if you attach an event listener by script to the form tag:
document.addEventListener("DOMContentLoaded", function() {
document.getElementsByName("form")[0].addEventListener("submit", function() {
var value = document.getElementById("inputValue").value;
if (value == "")
{
window.alert("Name must be filled out!");
}
});
});

Here is a solution using jQuery. Unlike some of the answers above, I did not use a form.
//Listen for the click of the button
$(document).on("click", "#enterButton", function(e) {
//Get the value of the input box
var F_Name = $('[name="FirstNameInput"]').val();
//If it is empty, alert.
if (!F_Name.trim()) {
alert('Empty');
}else{
//DO SOMETHING WITH THE INPUT, AJAX?
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="FirstNameInput">
<button type="button" id='enterButton'>Enter</button>

How can I pass the zip to the button function?

I did wrap this in a form with a submit button, but realized that this attempted to go to a new page without performing the logic. How can I pass the zip code to the onclick button event? If this is completely wrong, can you provide guidance onto how to perform this correctly.
<input type="text" placeholder="Zip Code" pattern="[0-9]{5}" name="zip" required />
<button id="checker">Go!</button>
<script>
var b = document.getElementById("checker");
b.addEventListener("click", function checkZipCode(zip) {
var zipCodes = [26505, 26501, 26507, 26506];
for (i = 0; i <= zipCodes.length - 1; i++) {
if (zip == zipCodes[i]) {
alert("YES");
break;
}
}
}
</script>

You need to get the value of your input and you can do this with document.querySelector('[name="zip"]').value
var b = document.getElementById("checker");
b.addEventListener("click", function checkZipCode(zip) {
var zip = document.querySelector('[name="zip"]').value;
var zipCodes = [26505, 26501, 26507, 26506];
for (i = 0; i <= zipCodes.length - 1; i++) {
if (zip == zipCodes[i]) {
alert("YES");
break;
}
}
})
<input type="text" placeholder="Zip Code" pattern="[0-9]{5}" name="zip" required />
<button id="checker">Go!</button>

Just use getElementById('ELEMENT_NAME_HERE').value like so:
Go!
<script>
var b = document.getElementById("checker");
b.addEventListener("click", function checkZipCode(zip){
console.log('Clicked');
var enteredZip = document.getElementById("zip").value;
console.log(enteredZip);
var zipCodes=[26505, 26501, 26507, 26506];
for(i=0; i<=zipCodes.length-1; i++){
if(zip == zipCodes[i]){
alert("YES");
break;
}}});
</script>
https://plnkr.co/edit/ptyUAItwyaSmZXsD81xK?p=preview
You can't pass it in.

basically if this myfunction() will return a false then the form would not be submitted;
Also this would only be performed at the time of submittion of the form
https://www.w3schools.com/jsref/event_onsubmit.asp
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input id='input-id' type="submit">
</form>
<script>
myfunction(){
if(/*some condition*/)
{
return false;
}
</script>
Also few things to consider since you seem new and people here are giving you very correct but specific solutions.
if you add a button to inside tag, that would submit the form on clicking it.
That is why many use a div which looks like a button by css. Mainly a clean solution to override the Button submit and also you can simply submit the form by Javascript.

Can't submit form through javascript to php

I have a form in html which I want to run verification in Javascript first before POST ing to PHP. However the link up to the PHP section does not seem to be working despite the fact that I have assigned names to each input tag and specified an action attribute in the form tag.
Here is the HTML code for the form:
<form id="signupform" action="signupform.php" method="post">
<input type="text" name="Email" placeholder="Email Address" class="signupinput" id="email" />
<br />
<input type="password" name="Password" placeholder="Password" class="signupinput" id="passwordone" />
<br />
<input type="password" placeholder="Repeat Password" class="signupinput" id="passwordtwo" />
<br />
<input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="submit" />
</form>
The button calls the javascript function which I use to verify the values of my form before sending to php:
function verifypass() {
var form = document.getElementById("signupform");
var email = document.getElementById("email").value;
var password1 = document.getElementById("passwordone").value;
var password2 = document.getElementById("passwordtwo").value;
var emailcode = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (emailcode.test(email)) {
if (password1.length > 6) {
if (password1 == password2) {
form.submit(); //this statement does not execute
} else {
$("#passwordone").notify("Passwords do not match!", {
position: "right"
})
}
} else {
$("#passwordone").notify("Password is too short!", {
position: "right"
})
}
} else {
$("#email").notify("The email address you have entered is invalid.", {
position: "right"
})
}
}

For some reason, some JavaScript implementations mix up HTML element IDs and code. If you use a different ID for your submit button it will work (id="somethingelse" instead of id="submit"):
<input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="somethingelse" />
(I think id="submit" has the effect that the submit method is overwritten on the form node, using the button node. I never figured out why, perhaps to allow shortcuts like form.buttonid.value etc. I just avoid using possible method names as IDs.)

I'm not sure why that's not working, but you get around having to call form.submit(); if you use a <input type="submit"/> instead of <input type="button"/> and then use the onsubmit event instead of onclick. That way, IIRC, all you have to do is return true or false.

I think it would be better if you do it real time, for send error when the user leave each input. For example, there is an input, where you set the email address. When the onfocusout event occured in Javascript you can add an eventlistener which is call a checker function to the email input.
There is a quick example for handling form inputs. (Code below)
It is not protect you against the serious attacks, because in a perfect system you have to check on the both side.
Description for the Javascript example:
There is two input email, and password and there is a hidden button which is shown if everything is correct.
The email check and the password check functions are checking the input field values and if it isn't 3 mark length then show error for user.
The showIt funciton get a boolean if it is true it show the button to submit.
The last function is iterate through the fields object where we store the input fields status, and if there is a false it return false else its true. This is the boolean what the showIt function get.
Hope it is understandable.
<style>
#send {
display: none;
}
</style>
<form>
<input type="text" id="email"/>
<input type="password" id="password"/>
<button id="send" type="submit">Send</button>
</form>
<div id="error"></div>
<script>
var fields = {
email: false,
password: false
};
var email = document.getElementById("email");
email.addEventListener("focusout", emailCheck, false);
var password = document.getElementById("password");
password.addEventListener("focusout", passwordCheck, false);
function emailCheck(){
if(email.value.length < 3) {
document.getElementById("error").innerHTML = "Bad Email";
fields.email = false;
} else {
fields.email = true;
document.getElementById("error").innerHTML = "";
}
show = checkFields();
console.log("asdasd"+show);
showIt(show);
}
function passwordCheck(){
if(password.value.length < 3) {
document.getElementById("error").innerHTML = "Bad Password";
fields.password = false;
} else {
fields.password = true;
document.getElementById("error").innerHTML = "";
}
show = checkFields();
console.log(show);
showIt(show);
}
function showIt(show) {
if (show) {
document.getElementById("send").style.display = "block";
} else {
document.getElementById("send").style.display = "none";
}
}
function checkFields(){
isFalse = Object.keys(fields).map(function(objectKey, index) {
if (fields[objectKey] === false) {
return false;
}
});
console.log(isFalse);
if (isFalse.indexOf(false) >= 0) {
return false;
}
return true;
}
</script>

Javascript - enabling button when input is filled

I want to enable my button, when input is filled. I want to do it in pure Javascript.
My code example in HTML:
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
<button type="submit" class="button button-dark" id="send">Send message</button>
</form>
And Javascript:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
function myFunction() {
var nameInput = document.getElementById('name').value;
if (!nameInput === "") {
document.getElementById('send').disabled = "false";
}
}
});
I don't know why my button is not changing to enable state after filling something in input. I have tried diffrent ways to do it, but it's still not working.
Please help.

An input element in HTML is enabled only when the disabled attribute is not present.
In your case disabled is always present in your element, it's just that it has a "false" or a "true" value - but this is meaningless according to the specs (http://www.w3schools.com/tags/att_input_disabled.asp)
So you need to remove it altogether:
document.getElementById('send').removeAttribute('disabled')

The problem with your code is that myFunction() isn't available because you defined it in the eventlistener for click.
Complete refactored code answer:
HTML
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name">
<br>
<button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>
JS
document.getElementById("name").addEventListener("keyup", function() {
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
document.getElementById('send').removeAttribute("disabled");
} else {
document.getElementById('send').setAttribute("disabled", null);
}
});

Try this one it will work for you
function myFunction() {
document.getElementById('send').disabled = true;
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
alert("Empty");
document.getElementById('send').disabled = false;
}
}
if you want to check the input should not be contain number then we can use isNaN() function, it will return true if number is not number otherwise return false

Your code is almost correct but you have defined myFunction inside a block, so input is not able to find myFunction() inside onkeyup="myFunction()"
so just keep the same outside of DOMContentLoaded event
see working demo
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
});
function myFunction() {
var nameInput = document.getElementById('name').value;
console.log(nameInput);
if (nameInput === "") {
document.getElementById('send').disabled = true;
} else {
document.getElementById('send').disabled = false;
}
}

html.textbox javascript/jquery

I've the below ajax form. In the form I've got 2 textbox. There is a radio button to choose between Unlock and reset the password. All I want to do here is if I select unlock password label and textbox should disappear. I could do this with below javascript function only if the label and textbox were pure html. If I do that then Ajax doesnot pick up the value of password. Your help is much appreciated.
<input name="rblTooType" value="Unlock" type="radio" checked="checked" onclick="rblToolType_OnChange(true)" />Unlock
<input name="rblTooType" value="reset" type="radio" onclick="rblToolType_OnChange(false)" />reset Password
#using(Ajax.BeginForm("Search","User",new AjaxOptions {
UpdateTargetId = "divResults"
})){
#Html.Label("UserName")
#Html.TextBox("term")
#Html.Label("Password")
#Html.TextBox("Password")
<input id="btnSubmit" type="submit" value="Unlock"/>
}
<script type="text/javascript">
function rblToolType_OnChange(isUnlock) {
if (isUnlock) {
Password.style.display = "none";
btnSubmit.value = "Unlock";
}
else {
Password.style.display = "";
btnSubmit.value = "reset Password";
}
}
</script>

You seem to be depending on an old quirk of IE where element names and ids were added as global variables. It is bad practice to rely on that because other browsers don't support it (it was a very bad idea from the start). Reference your form elements correctly and it should work. e.g.
function rblToolType_OnChange(isUnlock) {
var form = document.forms['<form name>']
if (isUnlock) {
form.Password.style.display = "none";
form.btnSubmit.value = "Unlock";
}
else {
form.Password.style.display = "";
form.btnSubmit.value = "reset Password";
}
}