html - Custom Form Validation not Working and junping to next step

admin管理员组

文章数量:1122832

I am working in WP and using the elementor builder. I am trying to create an own form, with steps.

I am able get it working, but I want to validate the fields at submit and that is not working.

By example this input field may contain only numbers and exactly 8. It had required, so if should at least say that this field is required, but doesn't give a message at all, and I am able to click next.

<div class="input-group">
        <label for="kvk_nummer">KvK Nummer:</label>
        <input type="text" id="kvk_nummer" name="kvk_nummer" pattern="\d{8}" title="KvK nummer moet 8 cijfers bevatten." required>
    </div>

This is my code.

<form id="multiStepForm">
<!-- Step 1 -->
<div id="step1">
    <h2>Step 1: Company Information</h2>

    <div class="input-group">
        <label for="bedrijf">Bedrijfsnaam:</label>
        <input type="text" id="bedrijf" name="bedrijf" maxlength="64" required>
    </div>

    <div class="input-group">
        <label for="branche">Branche:</label>
        <select id="branche" name="branche" required>
            <option value="">Selecteer een branche</option>
            <option value="allora">Allora</option>
            <option value="retail">Retail</option>
            <option value="truus">Truus</option>
            <option value="em">em</option>
            <option value="vis">vis</option>
            <option value="bedrijven">Bedrijven</option>
        </select>
    </div>

    <div class="input-group">
        <label for="kvk_nummer">KvK Nummer:</label>
        <input type="text" id="kvk_nummer" name="kvk_nummer" pattern="\d{8}" title="KvK nummer moet 8 cijfers bevatten." required>
    </div>

    <div class="input-group">
        <label for="adres">Adres:</label>
        <input type="text" id="adres" name="adres" maxlength="64" required>
    </div>

    <div class="input-group">
        <label for="huisnummer">Huisnummer:</label>
        <input type="text" id="huisnummer" name="huisnummer" pattern="\d{1,4}" title="Huisnummer moet tussen 1 en 4 cijfers bevatten." required>
    </div>

    <div class="input-group">
        <label for="postcode">Postcode:</label>
        <input type="text" id="postcode" name="postcode" pattern="\d{4}\s?[A-Z]{2}" title="Postcode moet 4 cijfers gevolgd door 2 letters bevatten, bijv. 1234 AB." required>
    </div>

    <div class="input-group">
        <label for="plaats">Plaats:</label>
        <input type="text" id="plaats" name="plaats" maxlength="64" required>
    </div>

    <div class="input-group">
        <label for="land">Land:</label>
        <input type="text" id="land" name="land" maxlength="64" value="Nederland" required>
    </div>

    <button type="button" class="next-step" data-step="2">Next</button>
</div>

<!-- Step 2 -->
<div id="step2" style="display:none;">
    <h2>Step 2: Contact Information</h2>
    <div class="input-group">
        <label for="contact_naam">Naam van Contact Persoon:</label>
        <input type="text" id="contact_naam" name="contact_naam" maxlength="64" required>
    </div>
    <div class="input-group">
        <label for="contact_email">E-mail Contact Persoon:</label>
        <input type="email" id="contact_email" name="contact_email" required>
    </div>
    <div class="input-group">
        <label for="contact_telefoon">Telefoonnummer:</label>
        <input type="tel" id="contact_telefoon" name="contact_telefoon" pattern="\d{10}" title="Telefoonnummer moet 10 cijfers bevatten." required>
    </div>
    <div class="input-group">
        <label for="contact_mobiel">Mobiele Nummer:</label>
        <input type="tel" id="contact_mobiel" name="contact_mobiel" pattern="\d{10}" title="Mobiele nummer moet 10 cijfers bevatten." required>
    </div>
    <button type="button" class="prev-step" data-step="1">Previous</button>
    <button type="button" class="next-step" data-step="3">Next</button>
</div>

<!-- Step 3: Summary -->
<div id="step3" style="display:none;">
    <h2>Summary</h2>
    <p id="summaryBedrijf"></p>
    <p id="summaryBranche"></p>
    <p id="summaryKvkNummer"></p>
    <p id="summaryAdres"></p>
    <p id="summaryHuisnummer"></p>
    <p id="summaryPostcode"></p>
    <p id="summaryPlaats"></p>
    <p id="summaryLand"></p>
    <p id="summaryContactNaam"></p>
    <p id="summaryContactEmail"></p>
    <p id="summaryContactTelefoon"></p>
    <p id="summaryContactMobiel"></p>
    <button type="button" class="prev-step" data-step="2">Previous</button>
    <button type="submit">Submit</button>
</div>

This is my js.

// Function to handle form navigation
function nextStep(step) {
    document.querySelector(`#step${step - 1}`).style.display = 'none';  // Hide the previous step
    document.querySelector(`#step${step}`).style.display = 'block';     // Show the current step

    if (step === 3) {
        // Populate summary with form data
        document.getElementById('summaryBedrijf').textContent = 'Bedrijfsnaam: ' + document.getElementById('bedrijf').value;
        document.getElementById('summaryBranche').textContent = 'Branche: ' + document.getElementById('branche').value;
        document.getElementById('summaryKvkNummer').textContent = 'KvK Nummer: ' + document.getElementById('kvk_nummer').value;
        document.getElementById('summaryAdres').textContent = 'Adres: ' + document.getElementById('adres').value;
        document.getElementById('summaryPostcode').textContent = 'Postcode: ' + document.getElementById('postcode').value;
        document.getElementById('summaryPlaats').textContent = 'Plaats: ' + document.getElementById('plaats').value;
        document.getElementById('summaryContactNaam').textContent = 'Naam van Contact Persoon: ' + document.getElementById('contact_naam').value;
        document.getElementById('summaryContactEmail').textContent = 'E-mail Contact Persoon: ' + document.getElementById('contact_email').value;
        document.getElementById('summaryContactTelefoon').textContent = 'Telefoonnummer: ' + document.getElementById('contact_telefoon').value;
        document.getElementById('summaryContactMobiel').textContent = 'Mobiele Nummer: ' + document.getElementById('contact_mobiel').value;
    }
}

function prevStep(step) {
    document.querySelector(`#step${step + 1}`).style.display = 'none';  // Hide the next step
    document.querySelector(`#step${step}`).style.display = 'block';     // Show the previous step
}

// Handle form submission via AJAX
jQuery(document).ready(function($) {
    // Attach click event handlers for navigation buttons
    $('#multiStepForm').on('click', '.next-step', function() {
        var step = $(this).data('step');
        nextStep(step);
    });

    $('#multiStepForm').on('click', '.prev-step', function() {
        var step = $(this).data('step');
        prevStep(step);
    });

    // Handle form submission via AJAX
    $('#multiStepForm').on('submit', function(e) {
        e.preventDefault();  // Prevent default form submission

        $.ajax({
            type: 'POST',  // HTTP method for the request
            url: ajax_object.ajax_url,  // AJAX URL localized in functions.php
            data: $(this).serialize() + '&action=form_submission',  // Serialize form data and append action
            success: function(response) {
                if (response.success) {
                    alert('Form submitted successfully!');  // Notify user of successful submission
                    $('#multiStepForm')[0].reset();  // Reset the form
                    $('#step1').show();  // Show step 1
                    $('#step2').hide();  // Hide step 2
                    $('#step3').hide();  // Hide step 3
                } else {
                    alert('An error occurred: ' + response.data);  // Notify user of errors
                }
            },
            error: function() {
                alert('An error occurred while submitting the form.');  // Notify user of AJAX errors
            }
        });
    });
});

So as simple as it is why is the front end validation not working, when using a custom coded form and loading it with a shortcode in a shortcode widget?

Thanks already,

B. M.

本文标签： htmlCustom Form Validation not Working and junping to next step