-1

HTMLとPHPで簡単なページを書きました。なので、PHPの前にJqueryで空欄をチェックしたいのですが、まだJqueryを学んでいないので、どなたか助けていただければ幸いです。

<?php
if(isset($_POST[add]))
{
if(empty($_POST[name]) || empty($_POST[surname])) {echo 'All form fields are required';}
}
?>
<form action="" method=post>
<table border=0  cellspacing=10 cellpadding=5>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" size="10" value=""></td>
        </tr>
        <tr>
            <td>Surname:</td>
            <td><input type="text" name="surname" size="10" value=""></td>
        </tr>
        <tr>
            <td colspan=2><input type="submit" name="add" value="Add"></td>
        </tr>
</table>
</form>
4

4 に答える 4

1

jquery を追加することで検証を追加できます。

 $('input[name="add"]').click(function() { 

          if($('input[name="name"]').val() == '' || $('input[name="surname"]').val() == '') {
             $('.error').html('');

              if($('input[name="name"]').val() == '') {           
               $('.error').append('<p>Please enter your name</p>');                
              }

              if ($('input[name="surname"]').val() == '') {
                  $('.error').append('<p>Please enter your surname</p>');
              }

              $('.error').show();

              return false;

          }

          return true;

      })

htmlコード

    <div class="error" style="display:none"></div>
<form action="" method=post>
<table border=0  cellspacing=10 cellpadding=5>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" size="10" value=""></td>
        </tr>
        <tr>
            <td>Surname:</td>
            <td><input type="text" name="surname" size="10" value=""</td>
        </tr>
        <tr>
            <td colspan=2><input type="submit" name="add" value="Add"></td>
        </tr>
</table>
</form>
于 2013-04-09T07:33:50.347 に答える
0

次のコードは、いくつかのアイデアを与えることができます。jquery のチュートリアルを読むことをお勧めします。

http://www.w3schools.com/jquery/default.asp 

   <html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
    $("#add").submit(function(){
        if ($('#name').length == ""){
            alert("ERROR in name!");
        }   
    }); 
}); 
</script>
<form action="" method=post>
<table border=0  cellspacing=10 cellpadding=5>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" id="name" size="10" value=""></td>
        </tr>
        <tr>
            <td>Surname:</td>
            <td><input type="text" name="surname" id="surname" size="10" value=""</td>
        </tr>
        <tr>
            <td colspan=2><input type="submit" name="add"  id="add" value="Add"></td>
        </tr>
</table>
</form>
</html>
于 2013-04-09T07:28:53.083 に答える
0 
<input class="field-name" type="text" name="name" size="10" value="">

この入力フィールドにクラスを追加して、jquery セレクターを使用できるようにしました

var name = $('.field-name').val();
if(name="") {
    console.log('name is empty');
    //your code here to do something when the field is empty
}
于 2013-04-09T07:26:13.967 に答える