[英]Switching required input fields validate dynamically
I have a form with 2 buttons ( Save Draft and Save Final FORM ).我有一个带有 2 个按钮的表单( Save Draft和Save Final FORM )。
I would like to switch the required fields depending on which button pressed.我想根据按下的按钮切换必填字段。
When I push the Save Draft it's required to fill out only the Name's field.当我按下保存草稿时,只需要填写名称字段。
When I push the Save Final FORM it's required to fill all of the fields except Text field.当我按下保存最终表格时,需要填写除文本字段之外的所有字段。
How can I do that?我怎样才能做到这一点?
HTML: HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>FORM</title>
</head>
<body>
<div class="container">
<h2 class="text-center">Test From</h2>
<br>
<form action="upload.php" method="post">
<h5>Types</h5>
<div class="form-row">
<div class="form-group col-md-12">
<div class="form-check">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="type_s" name="types" value="S" class="custom-control-input">
<label class="custom-control-label" for="type_s">Type (S)</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="type_z" name="types" value="Z" class="custom-control-input">
<label class="custom-control-label" for="type_z">Type (Z)</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="type_r" name="types" value="R" class="custom-control-input">
<label class="custom-control-label" for="type_r">Type (R)</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="type_t" name="types" value="T" class="custom-control-input">
<label class="custom-control-label" for="type_t">Type (T)</label>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<input type="number" class="form-control float-right" id="Number" name="Number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" placeholder="Number" >
<small class="form-text text-muted">Number</small>
</div>
<div class="form-group col-md-4">
<input type="number" class="form-control float-right" id="Number2" name="Number2" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="5" placeholder="Number2" >
<small class="form-text text-muted">Number2</small>
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control float-right" id="Text" name="Text" placeholder="Text" maxlength="15" >
<small class="form-text text-muted">Text</small>
</div>
</div>
<h5>Name</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="Name" name="Name" placeholder="Name" required >
<small class="form-text text-muted">Name</small>
</div>
</div>
<h6>Select:</h6>
<div class="form-row">
<div class="form-group col-md-4">
<select class="custom-select" id="select" name="select" >
<option value="" disabled selected>Choose</option>
<option value="select_1">Select 1</option>
<option value="select_1">Select 2</option>
<option value="select_1">Select 3</option>
<option value="select_1">Select 4</option>
</select>
<small class="form-text text-muted">Please Select</small>
</div>
</div>
<br>
<div class="no-print text-center">
<input class="btn btn-primary" type="submit" name="form_draft" value="Save Draft">
<input class="btn btn-primary" type="submit" name="form_new" value="Save Final FORM">
</div>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Thanks;)谢谢;)
Just add a click eventlistener
to your buttons.只需在您的按钮上添加一个
click eventlistener
器。
Add this at the END of your file before closing </body>
tag.在关闭
</body>
标记之前将其添加到文件的末尾。 I've only given you an example of the first button.我只是给你一个第一个按钮的例子。 You should be able to reproduce this however you want for the other button.
您应该能够以其他按钮的方式重现此内容。
<script>
var btnformdraft = document.getElementsByName("form_draft")[0];
btnformdraft.addEventListener("click", function(evt) {
//set default doContinue
let doContinue = true;
//verify your fields here
if(document.getElementById("Name").value === "") {
doContinue = false;
}
//add other field verifications
//verify if we continue
if(!doContinue) {
evt.preventDefault();
//showing alert BUT THIS CAN BE CHANGED TO HOWEVER YOU WANT TO DISPLAY THE ERROR MESSAGE
alert('The NAME field is required');
}
}, false);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.