Добавить проверку в поле динамической формы
Я использовал этот пример, который добавил форму поля динамически. Это сработало хорошо, но я должен добавить подтверждение в мою форму. В примере кода есть функция проверки, но она не работает, и я не знаю, как ее использовать, но не важно использовать мою собственную проверку. Я предпочитаю использовать общую проверку (начальную загрузку,...), как это сделать?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
</ul>
<script>
$(document).ready(function() {
<!-- Real-time Validation -->
<!--Name can't be blank-->
$('#id_stock_1_product').on('input', function() {
var input=$(this);
var is_name=input.val();
if(is_name){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});
<!--Email must be an email -->
$('#contact_email').on('input', function() {
var input=$(this);
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email=re.test(input.val());
if(is_email){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});
<!--Website must be a website -->
$('#contact_website').on('input', function() {
var input=$(this);
if (input.val().substring(0,4)=='www.'){input.val('http://www.'+input.val().substring(4));}
var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/;
var is_url=re.test(input.val());
if(is_url){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});
<!--Message can't be blank -->
$('#contact_message').keyup(function(event) {
var input=$(this);
var message=$(this).val();
console.log(message);
if(message){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});
<!-- After Form Submitted Validation-->
$("#contact_submit button").click(function(event){
var form_data=$("#contact").serializeArray();
var error_free=true;
for (var input in form_data){
var element=$("#contact_"+form_data[input]['name']);
var valid=element.hasClass("valid");
var error_element=$("span", element.parent());
if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
else{error_element.removeClass("error_show").addClass("error");}
}
if (!error_free){
event.preventDefault();
}
else{
alert('No errors: Form will be submitted');
}
});
});
</script>
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<form>
<div class="container">
<h1>jQuery czMore Plugin Demo</h1>
<div class="well clearfix">
<div id="czContainer">
<div id="first">
<div class="recordset">
<div class="fieldRow clearfix">
<div class="col-md-5">
<div id="div_id_stock_1_service" class="form-group">
<label for="id_stock_1_product" class="control-label requiredField">
Product<span class="asteriskField">*</span>
</label><div class="controls ">
<input type="text" name="stock_1_product" id="id_stock_1_product" class="textinput form-control" />
</div>
</div>
</div><div class="col-md-3">
<div id="div_id_stock_1_unit" class="form-group">
<label for="id_stock_1_unit" class="control-label requiredField">
Unit<span class="asteriskField">*</span>
</label><div class="controls "><select class="select form-control" id="id_stock_1_unit" name="stock_1_unit"><option value="" selected="selected">---------</option><option value="1">1/2liter</option></select></div>
</div>
</div><div class="col-md-3">
<div id="div_id_stock_1_quantity" class="form-group">
<label for="id_stock_1_quantity" class="control-label requiredField">
Quantity<span class="asteriskField">*</span>
</label><div class="controls "><input class="numberinput form-control" id="id_stock_1_quantity" name="stock_1_quantity" step="0.01" type="number" /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="submit_button" name="submit_button" class="btn btn-primary">Submit</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.czMore-1.5.3.2.js"></script>
<script type="text/javascript">
//One-to-many relationship plugin by Yasir O. Atabani. Copyrights Reserved.
$("#czContainer").czMore();
</script>
</div>
</body>
</html>