使用$ .ajax重复表单提交和验证问题

Question

I have similar forms in the same page so its causing an issue with the validation and submission, I would like to target in the function that i have the form that is submitting, see code below:

Html code:

<form action="" method="post">
                <div class="form-line">
                    <div class="form-group">
                        <span class="required-name">This field is required</span>
                        <input type="text" class="form-control" id="name" placeholder="Name" name="name">
                    </div>
                    <div class="form-group">
                        <span class="valid-email">Enter a valid email address</span>
                        <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                    </div>
                    <div class="form-group">
                        <span class="valid-phone">Enter a valid phone number</span>                       
                        <input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
                    </div>
                    <div class="form-group">
                        <span class="required-message">This field is required</span>
                        <textarea class="form-control" id="message" placeholder="Your Message" name="message"></textarea>
                    </div>
                    <div>

                        <input type="submit" value="Send Message" class="btn btn-default submit" onclick="formSubmit(event)" name="submit">
                    </div>
                </div>
            </form>

Javascript code:

function formSubmit(e) {
            e.preventDefault();

            var $ = jQuery;
            //Fields Values
            var nameVal = $('input[name="name"]').val();
            var emailVal = $('input[name="email"]').val();
            var phoneVal = $('input[name="phone"]').val();
            var messageVal = $('textarea').val();

            //Select Fiedls
            var name = $('input[name="name"]');
            var email = $('input[name="email"]');
            var phone = $('input[name="phone"]');
            var message = $('textarea');

            //Catch data
            var dataString = 'name=' + nameVal + '&email=' + emailVal + '&phone=' + phoneVal + '&message=' + messageVal;


            //Fields Validation
            if (nameVal === '') {
                name.addClass('warning-required');
                $('.required-name').show();
                return false;
            } else {
                name.removeClass('warning-required');
                $('.required-name').hide();
            }

            var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
            if (!emailFilter.test(emailVal)) {
                email.addClass('warning-required');
                $('.valid-email').show();
                return false;
            } else {
                email.removeClass('warning-required');
                $('.valid-email').hide();
            }

            if (!$.isNumeric(phoneVal) || phoneVal.length < 9) {
                phone.addClass('warning-required ');
                $('.valid-phone').show();
                return false;
            } else {
                phone.removeClass('warning-required ');
                $('.valid-phone').hide();
            }

            if (messageVal === '') {
                message.addClass('warning-required ');
                $('.required-message').show();
                return false;
            } else {
                message.removeClass('warning-required ');
                $('.required-message').hide();
            }



//Sending data to Php file
 jQuery.ajax({ 
             type: 'POST', 
             url: '/portfolio/form/send-mail.php', 
             data: dataString, 
             success: function() { 
                 $('#contactModal').hide();
                 $('#thankyou').modal(); 
             }, 
             error: function() { 
                 alert('There was an error, try again please'); 
             } 
        }); 
            return false;
} //End form Submit

A single form like that one is working fine but as i said before I have the form twice in one page and its validating both. Any idea how i could target just one when i call the function.

Thanks :)

Answer 1

Since you're using jquery, you can get the parent form this way:

function formSubmit(e) {
    var form = $(e.target).parents('form').first();
    var nameVal = form.find('input[name="name"]').val();
    ...
}