Having Trouble with Href in form-CodePudding

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 >
        <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"  placeholder="Fname" />   
          <input name="Email" id='Email' type="text"  placeholder="Email" />
          <select name="languages" id="lang" >
            <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'  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>

CodePudding user response：

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

Check HTML oninvalid Event Attribute for detailed information.

CodePudding user response：

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.

CodePudding user response：

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 >
        <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"  placeholder="Fname" />   
          <input name="Email" id='Email' type="text"  placeholder="Email" />
          <select name="languages" id="lang" >
            <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'  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>