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

Question

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;
    }
}

Compare the variable `x` to empty string...not another hard coded string — charlietfl, May 27 '17 at 14:21

score 0 · Answer 1 · answered May 27 '17 at 14:22

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"/>

score 0 · Answer 2 · answered May 27 '17 at 14:22

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>

score 0 · Answer 3 · answered May 27 '17 at 14:29

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!");
        }
    });
});

score 0 · Answer 4 · answered May 27 '17 at 14:30

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 make a pop up window (alertbox) if the input isn't valid?

4 Answers4