Javascript。送信ボタンをクリックするとエラーが表示されます

Question

ユーザーが送信をクリックすると（入力が無効）、[送信]ボタンの横にエラー出力を表示するにはどうすればいいですか？ユーザーが正しい入力を入力したときにのみ進めることができます。 は*

//this for specific user id 
$sql1 = "SELECT * FROM user where userid ='$fbid'"; 
$result1 = mysqli_query ($conn, $sql1); 

$sql="SELECT * FROM palmoilfruit WHERE refno ='$fuid'"; 
$result = mysqli_query($conn, $sql); 
while($row1=mysqli_fetch_array($result1)) 
         { 
         while($row=mysqli_fetch_array($result)){ 
          echo '<form method="post" onSubmit="validation()" >'; 
          // action="maklumatgredprocess.php?id='.$row1["userid"].'&pid='.$row["refno"].'">'; 
          echo '<div class="form-group row">'; 
          echo '<input id="userid" type="hidden" size="50px" value ="'.$row["userid"].'">'; 
          echo '<input id="refno" type="hidden" size="50px" value ="'.$row["refno"].'">'; 
          echo' </div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Jumlah Tandan</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input name="totalbunch" id="totalbunch" type="number" class="form-control" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Purata Tandan</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input name="avgbunch" id="avgbunch" type="number" class="form-control" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">OER Asas</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="basicoer" class="form-control" name="basicoer" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Masak</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="tdnmasak" class="form-control" name="tdnmasak" >'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Mengkal</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input name="tdnmengkal" id="tdnmengkal" type="number" class="form-control" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Muda</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="tdnmuda" class="form-control" name="tdnmuda" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Kosong</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input name="tdnkosong" id="tdnkosong" type="number" class="form-control" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Busuk</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="tdnbusuk" class="form-control" name="tdnbusuk" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Panjang</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="tdnpanjang" class="form-control" name="tdnpanjang" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Kotor</label>'; 
          echo'<div class="col-sm-9">'; 
          echo '<input type="number" id="tdnkotor" class="form-control" name="tdnkotor" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Dura</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="tdndura" class="form-control" name="tdndura" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Tandan Lama</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<input type="number" id="tdnlama" class="form-control" name="tdnlama" required="">'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group row">'; 
          echo '<label class="col-sm-3 col-form-label">Konsignasi Basah</label>'; 
          echo' <div class="col-sm-9">'; 
          echo '<select name="basah" class="form-control">'; 
          echo '<option value="Ya">Ya</option>'; 
          echo '<option value="Tidak">Tidak</option>'; 
          echo '</select>'; 
          echo '</div>'; 
          echo '</div>'; 

          echo '<div class="form-group">'; 
          echo '<br><input type="submit" value="Tambah" class="btn btn-primary"><p id="error"></p>'; 
          echo '</div>'; 
          echo '</form>'; 
          echo '</div>'; 
          echo '</div>'; 
          echo '</div>'; 
and some other coding. 

この私のジャバスクリプトを編集した：

tdnmasak + tdnmengkal + tdnmuda + tdnbusuk + tdnkosong totalbunchするに等しくなければならないとtdnpanjang + tdnkotor + tdndura + tdnlamaこれは私のコーディングでtotalbunch を超えることはできません

//function to validate if got error 
function validation() 
{ var tdnmasak = document.getElementById("tdnmasak").value; 
    var tdnmengkal = document.getElementById("tdnmengkal").value; 
    var tdnmuda = document.getElementById("tdnmuda").value; 
    var tdnbusuk = document.getElementById("tdnbusuk").value; 
    var tdnkosong = document.getElementById("tdnkosong").value; 
    var totalbunch = document.getElementById("totalbunch").value; 
    var tdnpanjang = document.getElementById("tdnpanjang").value; 
    var tdnkotor = document.getElementById("tdnkotor").value; 
    var tdndura = document.getElementById("tdndura").value; 
    var tdnlama = document.getElementById("tdnlama").value; 
    var userid = document.getElementById("userid").value; 
    var refno = document.getElementById("refno").value; 



    if((tdnmasak+tdnmengkal+tdnmuda+tdnbusuk+tdnkosong!=totalbunch)||(tdnpanjang+tdnkotor+tdndura+tdnlama>totalbunch)) 
    { 
     text = "Invalid input"; 
     document.getElementById("error").innerHTML = text; 
    }else { 
     //go to action maklumatgredprocess.php (the action) 
    } 
} 

maklumatgredpocess.php

$fid=$_POST['refno']; 
$totalbunch=$_POST['totalbunch']; 
$avgbunch=$_POST['avgbunch']; 
$basicoer=$_POST['basicoer']; 
$tdnmasak=$_POST['tdnmasak']; 
$tdnmengkal=$_POST['tdnmengkal']; 
$tdnmuda=$_POST['tdnmuda']; 
$tdnkosong=$_POST['tdnkosong']; 
$tdnbusuk=$_POST['tdnbusuk']; 
$tdnpanjang=$_POST['tdnpanjang']; 
$tdnkotor=$_POST['tdnkotor']; 
$tdndura=$_POST['tdndura']; 
$tdnlama=$_POST['tdnlama']; 
$basah=$_POST['basah']; 

//SQL operation 
$sql1 = "SELECT *FROM palmoilfruit WHERE refno=$fid" ; 
$result = mysqli_query ($conn, $sql1); 
$sql = "UPDATE palmoilfruit 
SET totalbunch='$totalbunch', avgbunch='$avgbunch', basicoer='$basicoer',   
tdnmasak='$tdnmasak', tdnmengkal='$tdnmengkal', tdnmuda='$tdnmuda', 
tdnkosong='$tdnkosong', 
tdnbusuk='$tdnbusuk', tdnpanjang='$tdnpanjang', tdnkotor='$tdnkotor', 
tdndura='$tdndura', tdnlama='$tdnlama', basah='$basah' 
WHERE refno= '$fid'"; 

Answer 1

あなたのJavaScriptはにできませんあなたのIDは一意ではないため、whileループは同じIDを持つ複数の要素を作成しているためです。

私はあなたがあなたのwhileループに$i変数を追加することで、それらの要素を一意にお勧め：

例：

$i = 0; 
while($row=mysqli_fetch_array($result)){ 
    ... 

    $i++; 
} 

次に、各ID名の最後にその$i番号を追加id="tdnmasak'.$i.'"は、これを行いますあなたは少なくともJavaScriptで必要なすべてのもののために。

echo '<form method="post" onSubmit="validation('.$i.')" >'; 

次にJavaScriptでごvalidation()機能にiパラメータを追加し、getElementByIdが今できるように、各要素のID名の末尾にiを追加します。

その後、あなたの検証機能に$i数がいることを渡します一意のIDを見つけます：

function validation(i) { 
    var tdnmasak = document.getElementById("tdnmasak"+i).value;