2016-09-16 3 views
1

Здравствуйте, я проверяю форму, чтобы увидеть, были ли входы заполнены. Я сохраняю кнопку отправки до тех пор, пока не будут заполнены необходимые поля. Однако, если я набираю текстовое поле, которое требуется, кнопка включается, даже если предыдущие обязательные поля не заполняются.jquery каждая функция не работает по назначению

Вот скрипка https://jsfiddle.net/v2to0fcw/1/

здесь разметка

<form action="/contact" method="post"> 
    <div class="form-row firstName"> 
     <p class="form-alert">Enter a valid first name.</p> 
     <input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required"> 
    </div> 
    <div class="form-row lastName"> 
     <p class="form-alert">Enter a valid last name. Example: Smith</p> 
     <input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control"> 
    </div> 
    <div class="form-row phone"> 
     <p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p> 
     <input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control"> 
    </div> 
    <div class="form-row email "> 
     <p class="form-alert">Enter a valid email. Example: [email protected]</p> 
     <input type="email" name="email" id="email" placeholder="Email*" required class="form-control required"> 
    </div> 
    <div class="form-row"> 
     <input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required"> 
    </div> 
    <div class="form-row"> 
     <textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea> 
    </div> 
    <input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right"> 
</form> 

здесь является JQuery

$(document).ready(function() 
{ 
    (function() 
    { 
     $('.required').on('keyup change', function() 
     { 
      $('.required').each(function() 
      { 
       if (this.value == '') 
       { 
        $('#submit').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie 
       } 
       else 
       { 
        $('#submit').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie 
       } 
      }); 

     }); 
    })() 

Кнопка не позволит, если Вы не заполните все необходимые поля, но если Я пропустил первые три и набрал сообщение, когда кнопка включена. Что происходит не так?

+1

Если окончательный '' не является пустой строкой, то атрибут 'disabled' кнопки удаляется; это именно то, что написано вашим кодом. –

+0

конечным результатом вы имеете в виду textarea? Итак, если (this.value == '') предназначен только для окончательного ввода? Я также попытался, если ('.required' == '') – badsyntax

+0

Проблема в том, что вы каждый раз добавляете и удаляете атрибут через цикл. Поэтому в конце он содержит настройку с последней итерации. – Barmar

ответ

4

Я обновил скрипку:

https://jsfiddle.net/efbonrnr/1/

$('.required').on('keyup change', function() 
    { 
      var requiredFieldsCompleted = true; 
     $('.required').each(function() 
     { 
      if (this.value == '') 
      { 
       requiredFieldsCompleted = false; 
      } 
     }); 

     if (requiredFieldsCompleted) 
     { 
      $('#submit').removeAttr('disabled'); 

     } 
     else 
     { 
      $('#submit').attr('disabled', 'disabled'); 
     } 

    }); 

Этот вопрос вы отключение/включение поля после каждой проверки, без учета предыдущих пунктов. Таким образом, на результат повлияет только последнее обязательное поле.

0

Привет мы должны поддерживать флаг вместо добавления и удаления disabled атрибут снова и снова, что вызывает этот вопрос увидеть мой комментарий с переменной var flag;

$(document).ready(function() { 
 
    (function() { 
 
    $('.required').on('keyup change', function() { 
 
     var flag = false; // we need to check if any of the field is empty then set it to true, we will decide the send button to be enabled or disabled after that 
 
     $('.required').each(function() { 
 
     if (this.value == '') { 
 
      flag = true; 
 
     } 
 
     }); 
 
     if (flag) { 
 
     $('#submit').attr('disabled', 'disabled'); 
 
     } else { 
 
     $('#submit').removeAttr('disabled'); 
 
     } 
 
    }); 
 
    })() 
 

 
    $('#firstName').on('change', function() { 
 
    var firstName = this.value; 
 
    if (/^[a-zA-Z- ]*$/.test(firstName) == false) { 
 
     $("#firstName").css('border', '1px solid #d22020').val(''); 
 
     $('.firstName .form-alert').css('display', 'block'); 
 
    } else { 
 
     $("#firstName").css('border', 'none'); 
 
     $('.firstName .form-alert').css('display', 'none'); 
 
    } 
 
    }); 
 

 
    $('#lastName').on('change', function() { 
 
    var lastName = this.value; 
 
    if (/^[a-zA-Z- ]*$/.test(lastName) == false) { 
 
     $("#lastName").css('border', '1px solid #d22020').val(''); 
 
     $('.lastName .form-alert').css('display', 'block'); 
 
    } else { 
 
     $("#lastName").css('border', 'none'); 
 
     $('.lastName .form-alert').css('display', 'none'); 
 
    } 
 
    }); 
 

 
    $('#phone').on('change', function() { 
 
    var phone = this.value; 
 
    if (this.value !== '') { 
 
     if (!$.isNumeric(phone)) { 
 
     $("#phone").css('border', '1px solid #d22020').val(''); 
 
     $('.phone .form-alert').css('display', 'block'); 
 
     } else { 
 
     $("#phone").css('border', 'none'); 
 
     $('.phone .form-alert').css('display', 'none'); 
 
     } 
 
    } 
 
    }) 
 

 
    $('#email').on('change', function() { 
 
    var email = /^[A-Z0-9._%+-][email protected]([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
 
    if (!email.test(this.value)) { 
 
     $("#email").attr('placeholder', '[email protected]').css('border', '1px solid #d22020').val(''); 
 
     $('.email .form-alert').css('display', 'block'); 
 
    } else { 
 
     $("#email").css('border', 'none').attr('placeholder', 'Email *');; 
 
     $('.email .form-alert').css('display', 'none'); 
 
    } 
 
    }); 
 
});
.form { 
 
    float: left; 
 
    width: 300px; 
 
} 
 
.form-row { 
 
    float: left; 
 
    width: 100%; 
 
    margin: 0 0 20px 0; 
 
} 
 
.label-control { 
 
    float: left; 
 
} 
 
.required-label:after { 
 
    float: right; 
 
    margin: 3px 0 0 3px; 
 
    content: '\f069'; 
 
    color: rgba(245, 0, 0, 1); 
 
    font-family: 'FontAwesome'; 
 
    font-size: 8px; 
 
} 
 
.form-control { 
 
    float: left; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    padding: 9px 9px; 
 
    background-color: rgba(245, 245, 245, 1); 
 
    border: none; 
 
    border-radius: 0px; 
 
    box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3); 
 
    color: rgba(68, 68, 68, 1); 
 
    font-family: 'Open Sans'; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
    letter-spacing: 1px; 
 
    -webkit-appearance: none; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -ms-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.form-control:hover, 
 
.form-control:focus, 
 
.form-control:active { 
 
    box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3); 
 
} 
 
textarea { 
 
    min-height: 175px; 
 
} 
 
input[type=submit] { 
 
    box-shadow: none; 
 
    cursor: pointer; 
 
    letter-spacing: 1px; 
 
} 
 
input[type=submit]:disabled { 
 
    opacity: 0.5; 
 
    cursor: not-allowed; 
 
} 
 
.form-alert { 
 
    float: left; 
 
    display: none; 
 
    width: 100%; 
 
    color: rgba(210, 32, 32, 1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/contact" method="post" class="form"> 
 
    <div class="col-dual"> 
 
    <div class="form-row firstName"> 
 
     <label for="firstName" class="label-control required-label">First Name:</label> 
 
     <p class="form-alert">Enter a valid first name.</p> 
 
     <input type="text" name="firstName" id="firstName" placeholder="First Name*" required class="form-control required"> 
 
    </div> 
 
    <div class="form-row lastName"> 
 
     <label for="lastName" class="label-control">Last Name:</label> 
 
     <p class="form-alert">Enter a valid last name. Example: Smith</p> 
 
     <input type="text" name="lastName" id="lastName" placeholder="Last Name" class="form-control"> 
 
    </div> 
 
    <div class="form-row phone"> 
 
     <label for="phone" class="label-control">Phone:</label> 
 
     <p class="form-alert">Enter a valid phone number. Example: 555 555 5555</p> 
 
     <input type="tel" name="phone" id="phone" placeholder="Phone" class="form-control"> 
 
    </div> 
 
    <div class="form-row email "> 
 
     <label for="email" class="label-control required-label">Email:</label> 
 
     <p class="form-alert">Enter a valid email. Example: [email protected]</p> 
 
     <input type="email" name="email" id="email" placeholder="Email*" required class="form-control required"> 
 
    </div> 
 
    </div> 
 
    <div class="col-dual"> 
 
    <div class="form-row"> 
 
     <label for="subject" class="label-control required-label">Subject:</label> 
 
     <input type="text" name="subject" id="subject" placeholder="Subject*" required class="form-control required"> 
 
    </div> 
 
    <div class="form-row"> 
 
     <label for="message" class="label-control required-label">Message:</label> 
 
     <textarea name="message" id="message" placeholder="Message*" required class="form-control required"></textarea> 
 
    </div> 
 
    <input type="submit" name="submit" id="submit" value="Send" disabled="disabled" class="btn btn-primary pull-right"> 
 
    </div> 
 
</form>

0

https://jsfiddle.net/v2to0fcw/5/

Отрывок:

if (this.value == '') { 
    $('#submit').attr('disabled', 'disabled'); 
    return false; 
} 

Вы используете проверку (включить/отключить кнопку отправки) над классом «требуется», который используется для нескольких элементов ввода. Когда вы редактируете последнее текстовое поле, проверка выполняется по всем входным элементам (с обязательным классом) &. В результате учитывается результат конечного элемента (который является текстовой областью в вашем случае), что вызывает проблему.

0

Обновленный скрипку, https://jsfiddle.net/efbonrnr/9/

Нет необходимости запускать весь цикл, когда первое пустое поле будет найден.

if (this.value == '') { 

     requiredFieldsCompleted = false;   
     return false; 
} 
Смежные вопросы