Question

我在同一页面中有类似的表单，因此导致验证和提交出现问题，我想在我提交的表单的函数中定位，请参阅下面的代码：

Html代码：

<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代码：

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

像这样一个单一的表格工作正常，但正如我之前所说，我在一个页面中有两次表格并验证两者。我知道在调用函数时我怎么能只针对一个。

谢谢：）

Answer 1

由于您正在使用jquery，因此您可以通过以下方式获取父表单：

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

Answer 2

我建议在表单中添加一个名称，然后按名称选择表单$（表单[name =＆＃34;＆＃34;]）。submit（）并执行$（表单[name =＆＃34;＆＃34;。]）上（＆＃39;提交＆＃39;，formSubmit）

Answer 3

我得到了它的工作。它的工作就像一个魅力。

我接受了你们两个人的想法。我在两个表单中都添加了一个id，所以当我点击“发送消息”按钮时，我将id保存在变量中，然后用它来选择字段或获取属于表单的值。

以下Javascript代码：

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

            var $ = jQuery;    
            var formId = $(e.target).parents('form').attr('id');  

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

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


            //Fields Validation
            if (nameVal === '') {
                name.addClass('#' + formId + ' warning-required');
                $('#' + formId + ' .required-name').show();
                return false;
            } else {
                name.removeClass('#' + formId + ' warning-required');
                $('#' + formId + ' .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('#' + formId + ' warning-required');
                $('#' + formId + ' .valid-email').show();
                return false;
            } else {
                email.removeClass('warning-required');
                $('#' + formId + ' .valid-email').hide();
            }

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

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

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

//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

感谢一百万：）

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

3 个答案: