'Having Trouble with Href in form

I am trying to create a form that will give an alert if a field is empty, or if the fields are not empty then it will take the user to a new page(this page does exist) I have tried replacing 'button' with 'input', but still no hope

     <div id='signupbox'>
       <div class="formbox">
        <h1>My first contact form</h1>
        <p style="color:red;">Anything With a * is required</p>
        <br>
        <form name="app-form" onsubmit="return validateForm()" method="post">      
          <input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />   
          <input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
          <select name="languages" id="lang" class="feedback-input">
            <option value="javascript">Select a language</option>
            <option value="javascript">JavaScript</option>
            <option value="php">PHP</option>
            <option value="java">Java</option>
            <option value="golang">Golang</option>
            <option value="python">Python</option>
            <option value="c#">C#</option>
            <option value="C++">C++</option>
            <option value="erlang">Erlang</option>
          </select>
          <textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
          <button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button>

        </form>
  
       </div>
     </div> 
    
</body>
<script>
  function validateForm() {
    let x = document.forms["app-form"]["Fname"].value;
    let y = document.forms["app-form"]["Email"].value;
    if ((x == "") || (y=='')) {
      alert("Required Fields Must be Filled Out.");
      return false;}}

  function Link(){
    document.location.href = "SuccessPage.html";
  }


</script>
javascripthtml


Solution 1:[1]

Also oninvalid attribute does give an alert if the case is to warn the user by showing an alert:

  <input 
   name="Fname" 
   id='Fname' 
   type="text" 
   class="feedback-input" 
   oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" />   
          
  <input 
   name="Email" 
   id='Email' 
   type="text" 
   class="feedback-input" 
   oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />

Check HTML oninvalid Event Attribute for detailed information.

Solution 2:[2]

Your onClick method is wrong. It should be this:

<button type='submit' onclick="validateFormData()" >SUBMIT</button>

In your validateFormData method you should check to make sure the form has data, if it does then you call your Link() method. If it doesn't, display an alert.

Solution 3:[3]

firstly, if you want a good form page, you have to prevent default behaves like page renewing thus you can have so good form validating process. I edited your code please use this.

  <div id='signupbox'>
       <div class="formbox">
        <h1>My first contact form</h1>
        <p style="color:red;">Anything With a * is required</p>
        <br>
        <form name="app-form" method="post">      
          <input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />   
          <input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
          <select name="languages" id="lang" class="feedback-input">
            <option value="javascript">Select a language</option>
            <option value="javascript">JavaScript</option>
            <option value="php">PHP</option>
            <option value="java">Java</option>
            <option value="golang">Golang</option>
            <option value="python">Python</option>
            <option value="c#">C#</option>
            <option value="C++">C++</option>
            <option value="erlang">Erlang</option>
          </select>
          <textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
          <button type='submit' id="button" >SUBMIT</button>

        </form>
  
       </div>
     </div> 
    
</body>
<script>
  document.getElementById("button").addEventListener("submit", function validateForm(e) {
    e.preventDefault();
    let x = document.getElementById("Fname").value;
    let y = document.getElementById("Email").value;
    if (!x || !y) {
      alert("Please fill required areas.")
      return
    } else {
      window.location.href="/SuccessPage.html"
    }}
     )
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 OrcunSelbasan
Solution 2 Kevin Z
Solution 3

Related Questions