Вот мой код ниже. У меня есть форма, состоящая из трех выпадающих списков и полей ввода. Итак, я хочу проверить, пустое поле или введенные отрицательные числа?
//Dependant dropdown code $("#item").change(function() { var iname = $(this).val(); $.post("fetch_data.php", {"iname": iname}, function (data) { document.getElementById('new_select').innerHTML=data; }); }); $('#submitBtn').click(function(){ var txt = $(".check").val(); if(parseInt(txt) < 0 || txt == -1){ alert("Enter positive values ..!!!!"); }else{ $('#sess').text($('#sesion').val()); $('#ite').text($('#item').val()); $('#new').text($('#new_select').val()); $('#qin').text($('#qtyin').val()); $('#qout').text($('#qtyout').val()); } }); $('#submit').click(function(){ $.ajax({ type:"POST", url:'profile.php', data:{sesion:$("#sess").text(),iname:$("#ite").text(),price:$("#new").text(),category:$("#qin").text(),qty:$("#qout").text()}, success: function(data){ $("#confirm-submit").modal("hide"); $("#result").html("<div class='alert alert-warning'>Record Inserted Successfully</div>"); setTimeout(function(){ $("#result").fadeOut(); },5000); window.location.reload(); } }); }); }); <form method='post' name='ireg' class="form-inline" role="form" id="formfield" enctype="multipart/form-data" onsubmit="return validateForm();"> <table id="entry" class="table table-responsive"> <tr> <td> <label for="sesion">Session</label></td> <td><select id="sesion" name="sesion" class="form-control check"> <option>--Select--</option> <option>Breakfast</option> <option>Lunch</option> <option>Dinner</option> </select></td> <td> <label for="item_name">Item Name</label></td> <td><select name="iname" id="item" class="form-control check" style="width:180px;"> <option>Select Item</option> <?php include 'db.php'; $select = $conn->query("SELECT item_name from items"); while($row = mysqli_fetch_array($select, MYSQLI_ASSOC)) { echo "<option>".$row['item_name']."</option>"; } ?> </select> </td> <td> <label for="new_select">Price</label> </td> <td> <select id="new_select" name="new_select" class="form-control check"> <option>Select Price</option> </select> </td> <td> <label for="qtyin">Qty(Dine In)</label> </td> <td> <input type="number" id="qtyin" min="0" name="qtyin" class="check" placeholder="QTY Dine In" style="width:80px;"/> </td> <td> <label for="qtyout">Qty(Parcel)</label> </td> <td> <input type="number" id="qtyout" name="qtyout" min="0" class="check" placeholder="QTY Dine Out" style="width:80px;"/> </td> <td> <!-- <button type="submit" name="submit" class="btn btn-primary">Submit</button> --> <input type="button" name="submit" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-success" /> </td> </tr> </table> </form> Я пытаюсь принять входные данные от пользователя, где необходима валидация, и как только он будет проверен, идет модальное всплывающее окно для подтверждения, затем отправьте процесс.
Если поддерживается проверка HTML5, для проверки не требуется jQuery.
<input type=number min=0 required placeholder='Enter a positive number'>
Если вы хотите получить специальное сообщение о проверке, выполните следующие действия:
<input type=number min=0 required placeholder="Enter a positive number" oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')">
:invalid класс psuedo может использоваться для применения к нему специального CSS.
Эта ссылка содержит некоторые примеры. Для поддержки браузера см. Caniuse .
РЕДАКТИРОВАТЬ:
Для выпадающих списков вы можете использовать required атрибут.
<select required> <option value="">None</option> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> </select>
Обратите внимание, что первый параметр должен быть пустым. Для получения дополнительной информации о применении, required для <select> см. Этот вопрос.