Question

Trying to make a validation on form without <form> tag.

Its a structure of cms plugin, which uses ajax, don’t know why inputs aren’t wrapped with <form></form>.

Html:

<div class="feedback">
    <input id="name" type="text" name="ajax-name" value="Your name" />
    <input id="mail" type="text" name="ajax-mail" value="Your e-mail" />
    <button type="submit" id="done">Send</button>
</div>

JS:

$(".feedback #done").click(function() {
    var flag = true;
    if (!$("#name").val()){
        $("#name").addClass('error');
        flag = false;
    }
    if (flag == true)
        $(".feedback").submit();
});

This code doesn’t work.

How do I make validation on form, without <form> tag?

Ajax doesn’t know about this validation.

Thanks.

Answer 1

Rather than

if (flag == true) 
    $(".feedback").submit(); 

do

return flag;

You can’t submit without the <form>, but you can prevent or allow the click() even to complete. Here’s the complete code:

$(".feedback #done").click(function() { 
    var flag = true; 
    if (!$("#name").val()){ 
        $("#name").addClass('error'); 
        flag = false; 
    }

    //return the value of flag instead of working with submit() 
    return flag;
});

If a click event returns false, that should prevent the click from going any further. Your flag variable will be true or false, depending on how the validation works out, so that will determine if the process moves forward or not.