HTML - проверить «необходимый атрибут», прежде чем продолжить

Question

У меня есть HTML-форму с необходимыми текстовыми полями, что-то вроде этого -

<form> 
    <input type="text" class="text_input" required> 
    <input type="text" class="text_input" required> 
    <div id="submit_div"> 
     <input type="submit id="submit"> 
    </div> 
</form> 

Для того, чтобы избежать случайного повторения представлений (например, когда кто-то нажмет представить два раза либо случайно наш нетерпеливо), я добавил следующий скрипт, который скрывает оригинал кнопку отправки и заменяет его с элементом, который является в основном идентичны по внешнему виду, но это нефункциональные

$("#submit")click(function() { 
    $("#submit").hide(); 
    $("#submit_div").append('<div id="submitting" class="buttonText animated flash">Submitting...</br><div class="againStop" id="stop">Please wait</div></div>'); 
}); 

проблема, которую я натыкаясь в это то, что нажатие кнопки отправки перед заполнением нужного поля вызывает запуск этого сценария, удаление кнопки со страницы и предотвращение отправки пользователем формы после заполнения требуемого поля.

Что мне нужно, это то, что говорит, что методы hide и append в моей функции запускаются только при заполнении всех обязательных полей. Как я могу получить доступ к требуемому свойству всех обязательных полей и проверить, что они возвращают true, прежде чем продолжить, чтобы методы запускались только при заполнении всех обязательных полей?

Answer 1

Добавить событие прослушивания события onsubmit для вашей формы и добавить return: false, если проверки не пройдены.

Answer 2

Подтвердите свои поля формы, используя JavaScript до отправки формы, и предупредите пользователя, если есть пустое поле или какая-либо некорректная информация. Найдите учебное пособие по проверке формы, используя javascript здесь, http://www.web-tutor99.com/complete-form-validation-using-javascript.html