テキストボックスとチェックボックスをチェックして次のフォームに行く

2つのテキストボックスと1つのチェックボックスを持つフォームがあります。フォームの検証に問題があります。私の目標は、ユーザがチェックボックスをチェックしたのか、テキストボックスに書いたのかをチェックすることです。ユーザーが両方とも、テキストボックスORチェックボックスをオンにした場合は、次のフォームに進むことができます。そうでない場合は、ダイアログボックスが表示されます。どのように私はこれを達成するのですか？テキストボックスとチェックボックスをチェックして次のフォームに行く

私の擬似コード：

if (checkBox1.Checked) 
{ 
    //Go to next Form 
} 
else 
{ 
    if (textBox1.Text == "" || textBox2.Text == "") 
    { 
     MessageBox.Show("Please fill in the textboxes or mark the checkbox to continue"); 
    } 
    else 
    { 
     //Go to next Form 
    } 
}

私のHTMLフォーム

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script> 

    <script> 
    jQuery(document).ready(function() 
    { 
     jQuery('#continue').on('click', function() 
     { 
      jQuery('#stepTwoForm').submit(); 
      return false; 
     }) 

    }) 
    </script> 


</head> 

<body> 
     <form id="stepTwoForm" action="NextForm.php" method="POST" class="form-horizontal"> 
       <div class="form-group"> 
       <label for="Textbox1" class="col-sm-3 control-label">Textbox1</label> 
       <div class="col-sm-6"> 
        <input name="Textbox1" type="text" class="form-control" id="Textbox1"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label for="Textbox2" class="col-sm-3 control-label">Textbox2</label> 
       <div class="col-sm-6"> 
        <input name="Textbox2" type="text" class="form-control" id="Textbox2"> 
       </div> 
       </div> 

      <center><input type="checkbox" name="checkboxName" id="checkboxID" value="Bike"> If checked go to next page or else fill out the textboxes</center> 
     </form> 

    <center><a id="continue" type="button" class="btn btn-primary btn-md" href="#">Continue</a></center> 

</body> 
</html>

出典

2016-12-12 taji01

使用javascriptやjqueryのあなたがそれを提出する前に、フォームを検証します。チェックボックスがチェックされているか、入力が入力されていることを確認する場合は、 'alert（）'を使用するか、隠れたメッセージを表示してユーザにエラーを通知します。 – Blinkydamo

OKあなたが提出する前に、フォームを検証するためにjqueryのを使用する場合、あなたはをユーザに知らせることができます間違い。下記のコードを見てください。正しい方向に進むべきです。チェックボックスが選択されておらず、入力が空であれば警告が表示されます。そうでなければ、フォームが送信されます。

<script> 
    $(document).ready(function(){ 
    $('#continue').on('click', function() 
    { 
     if($('#checkboxID').is(':checked')) 
     { 
     $('#stepTwoForm').submit(); 
     } 
     else 
     { 
     if($('input[name=Textbox1]').val() == '' || $('input[name=Textbox2]').val() == '') 
     { 
      alert('Please fill in the textboxes or mark the checkbox to continue'); 
     } 
     else 
     { 
      $('#stepTwoForm').submit(); 
     } 
     } 
    }) 
    }) 
</script>

の作業例 - https://jsfiddle.net/Lhuaz0fn/

出典

2016-12-12 02:45:22 Blinkydamo

ありがとうございます。完璧に働いています。 – taji01

テキストボックスとチェックボックスをチェックして次のフォームに行く

答えて

関連する問題