I am new to JavaScript. I have a form in an html file that has some text fields. When someone click the submit button, a JavaScript function is called to do some work (in this case, a simple alert). It works as I wanted, when I fill the text fields and click the submit button it calls the JavaScript function and the function shows an alert. However, the problem is, when a user clicks the submit button keeping some fields empty and/or not following the pattern of an email address, it calls the JavaScript function (even though HTML 5 has shown warnings in the form). I want the JavaScript function should only be called if there are no HTML warnings, I mean no empty fields and the user must follow the email pattern. Thank you for your help.
HTML code:
<form id="myForm" method="post" role="form" class="contactForm">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
<button id="submitFormData" onclick="SubmitFormData();" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="alert.js"></script>
Javascript Code (alert.js):
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}
CodePudding user response：
you can use required attribute in the input and one more thing you can call the SubmitFormData() onsubmit form here's your modified code :
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}<form id="myForm" method="post" role="form" class="contactForm" onsubmit="SubmitFormData();">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required/>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message" required></textarea>
<button id="submitFormData" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>CodePudding user response：
You just need to add the required attribute to your fields, see
CodePudding user response：
Here is the best working solution for what you want to achieve by using the form validation JS plugin.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<style>
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
.error {
color: red;
margin-left: 5px;
}
label.error {
display: inline;
}
</style>
<script>
$(document).ready(function() {
$('form[id="second_form"]').validate({
rules: {
name: 'required',
user_email: {
required: true,
email: true,
},
message: {
required: true,
}
},
messages: {
name: 'This field is required',
user_email: 'Enter a valid email',
message: 'This field is required'
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h2>Example 2:</h2>
<form id="second_form" method="post" action="">
<div>
<label for="name">Name:</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
</div>
<div>
<label for="email">Email</label>
<input type="email" class="form-control" name="user_email" id="user_email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
</div>
<div>
<label for="message">message:</label>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>CodePudding user response：
The easiest way was to provide an HTML only solution based on a form element's required attribute since the browser will take over the validation of required elements also by their element/control type ...
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
required
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
required
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
required
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>A generic custom validation is much more complex and labour-intensive ...
function validateControValue(elm) {
let isValid = true;
const elmType = elm.type;
if (elmType !== 'button' && elmType !== 'submit') {
const $elm = $(elm);
const isEmpty = ($elm.val().trim() === '');
if (isEmpty) {
$elm.val('');
$elm.addClass('validation-error');
} else {
$elm.removeClass('validation-error');
}
// non empty is valid, empty is invalid.
isValid = !isEmpty;
}
return isValid;
}
function handleValidFormSubmit(/* evt */) {
const isValidSubmitData = Array
.from(this.elements)
.every(validateControValue);
return isValidSubmitData;
}
function main() {
$('#myForm').on('submit', handleValidFormSubmit)
}
$(document)
.ready(main);.validation-error {
border: 1px solid #f00;
}<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- <script src="alert.js"></script> //-->