html part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presence Validation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female
<label>
Accept Terms:
<input type="checkbox" id="acceptTerms" name="acceptTerms">
</label>
<button type="button" id="submitButton">Submit</button>
</form>
</body>
</html>
jquery part
<script>
$(document).ready(function() {
$('#submitButton').click(function() {
var elementsToValidate = [
{ id: 'username', label: 'Username' },
{ id: 'email', label: 'Email' },
{ id: 'gender', label: 'Gender' },
{ id: 'acceptTerms', label: 'Accept Terms' },
];
var validationFailed = false;
// Validate each element
for (var i = 0; i < elementsToValidate.length; i++) {
var elementId = elementsToValidate[i].id;
var elementLabel = elementsToValidate[i].label;
var elementValue = getFormElementValue(elementId);
if (!elementValue) {
validationFailed = true;
showValidationError(elementLabel);
}
}
if (!validationFailed) {
// If validation succeeds, make an Ajax request
var formData = {
username: getFormElementValue('username'),
email: getFormElementValue('email'),
gender: getFormElementValue('gender'),
acceptTerms: getFormElementValue('acceptTerms'),
};
// Ajax request example (replace with your actual endpoint)
$.ajax({
type: 'POST',
url: '/your-api-endpoint',
data: formData,
success: function(response) {
// Handle the success response
alert('Form submitted successfully! Server response: ' + response);
},
error: function(error) {
// Handle the error response
alert('Error submitting the form: ' + error.responseText);
}
});
}
});
// Function to show validation error in a modal
function showValidationError(elementLabel) {
$('#validationErrorModalBody').append('<p>' + elementLabel + ' cannot be empty.</p>');
$('#validationErrorModal').modal('show');
}
// Function to get the value of a form element based on its type
function getFormElementValue(elementId) {
var element = $('#' + elementId);
if (element.is('input[type="text"]') || element.is('input[type="email"]')) {
return element.val().trim();
} else if (element.is('select')) {
return element.val();
} else if (element.is('input[type="radio"]')) {
return $('input[name="' + element.attr('name') + '"]:checked').val();
} else if (element.is('input[type="checkbox"]')) {
return element.is(':checked') ? 'checked' : '';
}
return '';
}
});
</script>
Top comments (0)