Popup form validation in magento2

Question

I have a popup model with following fields

• name
• email
• comment box
• submit button with input type=”button”

I displayed this form in a popup model.

Now I need to validate these fields. Is there any solution to validate these input fields in magento 2?

    <form>
    <h3>Feedback form</h3>
    <label>Name:</label><input type="text" name="name" id="name">
    <label>Email:</label><input type="email" name="email" id="email">
    <label>Suggestion:</label>
    <select name="selectname" id="suggestion">
        <option value="">--Select--</option>
        <option value="on product">On product</option>
        <option value="on delivery">On delivery</option>
        <option value="on usability">On usability</option>
        <option value="criticism">Criticism</option>
        <option value="others">Others</option>
    </select>
    <label>Comments:</label><textarea rows="4" cols="50" id="comments"></textarea>
    <input type="button" value="submit" id="feedbackBtn">
    </form>
</div>

Answer 1

You should re-create your form with the help of this customer registration file. It has validation classes and attributes which you can use the exact same way.

vendor/magento/module-customer/view/frontend/templates/form/register.phtml

NOTE: if you want to add server side validation then you can reference this

vendor/magento/module-contact/Controller/Index/Post.php

Answer 2

If you are not submitting your form using a submit button with type "submit" then you should use jquery on click of your button and then validate your form according to your requirements.

Follow this link for form validation using jquery.

You can validate email too using jquery, check this question for various ways to achieve this.

Also you can use the following event if you use type='sibmit'

$("form").submit(function(){
    // Your validations
    // ...
    // ...
    // ...
    // ...
    // ...
    // if(not valid){
        return false;
    // }
})

Answer 3

Magento 2 has build in validation methods. You can check default modeles templates like vendor\magento\module-customer\view\frontend\templates\form\register.phtml

and use data-validate attribute like this

<input type="password" name="password_confirmation" title="<?php /* @escapeNotVerified */ echo __('Confirm Password') ?>" id="password-confirmation" class="input-text" data-validate="{required:true, equalTo:'#password'}" autocomplete="off">

Answer 4

Check out this tutorial.

It works perfectly for me