切換所需的輸入字段動態驗證

Question

我有一個帶有 2 個按鈕的表單（ Save Draft和Save Final FORM ）。
我想根據按下的按鈕切換必填字段。
當我按下保存草稿時，只需要填寫名稱字段。
當我按下保存最終表格時，需要填寫除文本字段之外的所有字段。

我怎樣才能做到這一點？

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>

謝謝;）

JSFIDDLE

Answer 1

只需在您的按鈕上添加一個click eventlistener器。

在關閉</body>標記之前將其添加到文件的末尾。 我只是給你一個第一個按鈕的例子。 您應該能夠以其他按鈕的方式重現此內容。

<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>

切換所需的輸入字段動態驗證

問題描述

1 個解決方案

解決方案1
1 已采納 2021-12-06 12:54:06

切換所需的輸入字段動態驗證

問題描述

1 個解決方案

解決方案1 1 已采納 2021-12-06 12:54:06

解決方案1
1 已采納 2021-12-06 12:54:06