Home/ Questions/Q 8923315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:05:13+00:00

I’m making this quick internet app, where a user fills in an input field

  • 0

I’m making this quick internet app, where a user fills in an input field and then clicks a “Next” button. I read on W3Schools about how to do quick and easy Javascript form validation, but I want to know if there’s a way to do basically the same thing without a form (i.e. document.getElementById("myInput").value; but this is not working). The reason for not wanting a form is because when the “Next” button is clicked it performs a page animation then goes to the next page, and I don’t want any form submission delay; (just want an input and a button which clicked calls the animation then sets window.location).

The type of validation I am doing is just checking if the field is null or not, so I was wanting to do something like this:

JavaScript:

function ValidateFields() {
  var x = document.getElementById("myInput").value;
  if(x == null || x == '') {
    $(".error-msg").animate({opacity: "1"}, 400);
    return false;
  } else {
    $("body").animate({"margin-left": "-200px", opacity: "1"}, 400);
    setInterval("NextPage()", 800); // double animation time
  }
}
function NextPage() {
  window.location = "next.html?uid=false";
}

HTML:

<input type="text" id="myInput" placeholder="" />
<input type="button" value="Next" onclick="return ValidateFields()" />

But obviously, it will not work (lack of correspondence and basic structure (lol)).

Note: I know Javascript or any client-side validation is not ideal but I have balanced the odds and the consequences and I will also consider backing it with ASP or PHP once I put the page on a server and launch it, if I notice some odd burst of internet popularity, which I’m not really expecting.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This code seems to work (tested with Chrome):

    <html>
<head>
    <title>This works</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="" />
    <input type="button" value="Next" onclick="return ValidateFields();" />
    <div class="error-msg" style="opacity:0">Some error message</div>

    <script type="text/javascript">        
        function ValidateFields() {
          var x = document.getElementById("myInput").value;
          if(x == null || x == '') {
            $(".error-msg").animate({opacity: "1"}, 400);
            return false;
          } else {
            $("body").animate({"margin-left": "-200px", opacity: "1"}, 400);
            setTimeout("NextPage()", 800); // double animation time
          }
        }
        function NextPage() {
            window.location = "http://www.yahoo.com"; //just a test
        }
    </script>    
</body>
</html>​

    Let me know if you need more than this.

    • 0