2017-08-31 21:29
浏览 83

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

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 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 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 class="form-group">
                        <span class="required-message">This field is required</span>
                        <textarea class="form-control" id="message" placeholder="Your Message" name="message"></textarea>

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

Javascript code:

function formSubmit(e) {

            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 === '') {
                return false;
            } else {

            var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
            if (!emailFilter.test(emailVal)) {
                return false;
            } else {

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

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

//Sending data to Php file
             type: 'POST', 
             url: '/portfolio/form/send-mail.php', 
             data: dataString, 
             success: function() { 
             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 :)

3条回答 默认 最新

相关推荐 更多相似问题