stackoom
  简体   繁体   中英

How do I make form submit only if required fields have input?

 原文  2019-12-09 15:11:01  0   2    javascript

Question

I was able to get this code to work before I put an alert button, but I need to give the user some sort of notification the form has been submitted (although not actually needing to submit anywhere). The email, phone and name fields are required but with the alert I have right now, it is giving the "submission received" alert even if required fields are empty. 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Contact Us</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" /> <script type="text/javascript"> const name = textField.checkValidity(); const email = emailField.checkValidity(); const phone = telField.checkValidity(); function submitAlert() { alert("Thank you for your feedback. Your form has been submitted."); } </script> <style> form { margin: 0 auto; align-content: center; text-align: center; font-family: 'Open Sans Condensed', sans-serif; width: 35%; } </style> </head> <body> <div class="container"> <div class="jumbotron jumbotron-fluid"> <header> <h1 class="display-1">Burger Shack</h1> </header> <p class="lead"> New location in Rice Village coming April 2020!</p> </div> <nav> <hr /> <p><a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a> <a class="btn" href="menu.html">Menu</a> <a class="btn" href="contact.html">Contact Us</a> </nav> <hr /> <div class="container"> <form name="contactForm" onsubmit="return validateForm()" method="post" class="text-center border border-light"> <div class="form-group row"> <label for "Name" class="col-md-2 col-form-label"><b>Name:</b></label> <div class="col-md-10"> <input type="text" id="Name" name="Name" class="form-control" required> </div> </div> <div class="form-group row"> <label for "Email" class="col-md-2 col-form-label"><b>Email:</b></label> <div class="col-md-10"> <input type="email" id="Email" name="Email" class="form-control" required> </div> </div> <div class="form-group row"> <label for "Phone" class="col-md-2 col-form-label"><b>Phone:</b></label> <div class="col-md-10"> <input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required> </div> </div> <div class="form-group row"> <label for "inquiry" class="col-form-label"><b>Reason for Inquiry:</b></label> <div class="col"> <select name="Reasons" id="inquiry" class="form-control"> <option value="CateringDefault">Catering</option> <option value="PrivateParty">Private Party</option> <option value="Feedback">Feedback </option> <option value="Other">Other</option> </select></div></div> <div class="form-group row"> <label for "info" id="info" class="col-form-label"><b>Aditional Information:</b></label> <div class="col"> <textarea class="form-control" id="txtArea"></textarea></div></div> <div class="form-group row"> <label for "customer" class="col-form-label">Have you been to the restaurant?</label> <div class="col"> <div class="form-check form-check-inline"> <input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked /> <label class="form-check-label" for="no">No</label></div> <div class="form-check form-check-inline"> <input type="radio" id="yes" name="answer" value="YES" class="form-check-input" /> <label class="form-check-label" for="yes">Yes</label> </div></div> <div class="form-group row"> <label for"choices" class="col-form-label">Best days to contact you:</label> <div class="col"> <div class="form-check-inline"> <label class="form-check-label" for="M">M </label> <input type="checkbox" id="M" name="choices" value="monday" class="form-check-input"> <label class="form-check-label" for="T">T </label> <input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input"> <label class="form-check-label" for="W">W </label> <input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input"> <label class="form-check-label" for="Th">Th </label> <input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input"> <label class="form-check-label" for="F">F</label> <input type="checkbox" id="F" name="choices" value="friday" class="form-check-input"> </div></div> </div> </div> <div class="row"> <button type="submit" id="submitButton" class="btn btn-default" onclick="submitAlert();">Submit</button> </div> </form> </container> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> <footer> <hr /> <p> 305 Gray Street, Houston, TX, 77004 <br /> 713-555-6752</p> </footer> </html>

2 answers

solution1
 1  2019-12-09 15:43:13

Instead of calling checkValidity on each field and doing it immediately when the page loads, check the form 's validity during the form's submit event. Do not do it on the submit button 's click event. If it's valid, do nothing and let the submit event continue and do its thing. If it's not, cancel the event using event.preventDefault() .

NOTES:

Place your script elements near the end of the code, just before the </body> tag so that by the time the browser gets to that point, all of the page HTML will have been parsed into memory and is accessible.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Contact Us</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" /> <style> form { margin: 0 auto; align-content: center; text-align: center; font-family: 'Open Sans Condensed', sans-serif; width: 35%; } label { font-weight:bold; } /* Don't use <b>. Formatting is done with CSS */ </style> </head> <body> <div class="container"> <div class="jumbotron jumbotron-fluid"> <header> <h1 class="display-1">Burger Shack</h1> </header> <p class="lead"> New location in Rice Village coming April 2020!</p> </div> <nav> <hr> <p> <a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a> <a class="btn" href="menu.html">Menu</a> <a class="btn" href="contact.html">Contact Us</a> </nav> <hr> <div class="container"> <form name="contactForm" method="post" class="text-center border border-light"> <div class="form-group row"> <label for "Name" class="col-md-2 col-form-label">Name:</label> <div class="col-md-10"> <input type="text" id="Name" name="Name" class="form-control" required> </div> </div> <div class="form-group row"> <label for "Email" class="col-md-2 col-form-label">Email:</label> <div class="col-md-10"> <input type="email" id="Email" name="Email" class="form-control" required> </div> </div> <div class="form-group row"> <label for "Phone" class="col-md-2 col-form-label">Phone:</label> <div class="col-md-10"> <input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required> </div> </div> <div class="form-group row"> <label for "inquiry" class="col-form-label">Reason for Inquiry:</label> <div class="col"> <select name="Reasons" id="inquiry" class="form-control"> <option value="CateringDefault">Catering</option> <option value="PrivateParty">Private Party</option> <option value="Feedback">Feedback </option> <option value="Other">Other</option> </select> </div> </div> <div class="form-group row"> <label for "info" id="info" class="col-form-label">Aditional Information:</label> <div class="col"> <textarea class="form-control" id="txtArea"></textarea> </div> </div> <div class="form-group row"> <label for "customer" class="col-form-label">Have you been to the restaurant?</label> <div class="col"> <div class="form-check form-check-inline"> <input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked> <label class="form-check-label" for="no">No</label> </div> <div class="form-check form-check-inline"> <input type="radio" id="yes" name="answer" value="YES" class="form-check-input"> <label class="form-check-label" for="yes">Yes</label> </div> </div> <div class="form-group row"> <label for"choices" class="col-form-label">Best days to contact you:</label> <div class="col"> <div class="form-check-inline"> <label class="form-check-label" for="M">M </label> <input type="checkbox" id="M" name="choices" value="monday" class="form-check-input"> <label class="form-check-label" for="T">T </label> <input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input"> <label class="form-check-label" for="W">W </label> <input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input"> <label class="form-check-label" for="Th">Th </label> <input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input"> <label class="form-check-label" for="F">F</label> <input type="checkbox" id="F" name="choices" value="friday" class="form-check-input"> </div> </div> </div> </div> <div class="row"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> <!-- A footer must be inside of the body --> <footer> <hr> <p> 305 Gray Street, Houston, TX, 77004 <br>713-555-6752</p> </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script> // Do you event binding in JavaScript, not with inline HTML event attributes like onsubmit document.querySelector("form").addEventListener("submit", submitAlert); // All event callbacks will automatically get the event passed to them function submitAlert(event) { // Since the form element is what raised the event, "this" will refer to it if(this.checkValidity()){ alert("Thank you for your feedback. Your form has been submitted."); } else { event.preventDefault(); // Stop the submit event. } } </script> </body> </html>

solution2
 0  2019-12-09 15:20:34

First, add a id for the inputs. Second:

function submitAlert() {
 if (('.contact-form').find('input[type=text],select')) {
  alert("Thank you for your feedback. Your form has been submitted.");
 }
}

See if the inpunts are sending a value.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Using Redux Form, how do I only submit if any fields have changed? Submit form only if all required fields are full? How to make all input fields be required before submitting a form? How to have button in the form which check for required fields on submit but does not refresh the page? How can I force an AngluarJS form to realize required fields have been filled through DOM manipulation (no user input)? GTM - Fire tag on form submit (only if required fields are filled) How to make a condition in form using javascript for displaying a message on clicking submit button while required fields are not empty? How to submit a form only if all the required attr fields are filled using bootstrap? How do I get the form to submit on enter key only when user has focus on login input? How do I check if the required fields in an html form are filled?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM