1

我正在学习 jquery 和 jquery mobile。我试试这个；单击下一步按钮时，如果输入文本为空，则会发出警报。但是如何以相同的方法检查所有文本值？如果这些是空的，我该如何停止下一个按钮操作？谢谢。

<!DOCTYPE html />
<html>
<head>
    <title>Ebru Sezal JQuery Mobile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />   
      <script type="text/javascript">
          $(document).ready(function () {
              $(".nextBtn").click(function () {
                  $('input:text').each(function (i) {
                      var uText = $(this).val();
                      if (!uText)
                        alert("alanlar boş olamaz!")                     
                  });

              });

          });

          /*$("#nextBtn").click(function () {
          // $('input[type="text"]').attr('required placeholder')
          $(function () {
          var values = $('input[type="text"]').map(function () {
          return this.value
          }).get()
          })

          $('input[type="text[]"]').each(function () {
          alert($(this).val());
          });*/            



        </script>
</head>

<body>
    <div data-role="page" data-title="pOne" id="mainPage">
        <div data-role="header" data-position="fixed">  
            <h1>Logo</h1>
            <a href="#mainPopup" data-icon="grid" class="ui-btn-right ui-corner-all ui-shadow-icon" data-iconpos="notext" data-rel="popup"></a>                
        </div>
        <div data-role="popup" id="mainPopup">
            <ul data-role="listview" data-inset="true" data-theme='d'>
                <li data-icon="plus"><a href="#registerPage1">New User</a></li>
                <li data-icon="delete"><a href="#" >Exit</a></li>
            </ul>         
        </div>

        <div data-role="content">
            <label for:"username">Username:</label>
            <input type="text" />
            <label for:"username">Password:</label>
            <input type="password"/>
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" data-role="button" data-inline="true" >Sign-in</a>
                <a href="#" data-role="button" data-inline="true">Log-in</a>
            </div>      
         </div>
        <div data-role="footer" data-position="fixed">
            footer
        </div>
    </div>  

    <div data-role=page id="registerPage1">   
        <div data-role="header" data-position="fixed"><h1>Registration</h1></div>  
        <div data-role="content">
            <div data-role="fieldcontainer">
                <label for:"name">Name:</label>
                <input type="text" id="name" required placeholder="Enter your name">
            </div>
            <div data-role:"fieldcontainer">
                <label for:"surname">Surname:</label>
                <input type="text" id="surname" required placeholder="Enter your surname">
            </div>  
            <div data-role:"fieldcontainer">
                <label for:"email">E-mail:</label>
                <input type="email" id="email" required placeholder="Enter your e-mail">
            </div>     

        </div> 
        <div data-role="footer" data-position="fixed">           
         <div data-role="navbar">          
                <ul> 
                    <li> <a href="#" data-rel="back" data-role="button" data-icon="arrow-l" data-iconpos="left" data-corners="false">Back</a></li>
                    <li> <a href="#registerPage2" class="nextBtn"  data-rel="next" data-role="button" data-icon="arrow-r" data-iconpos="right" data-corners="false">Next</a> </li>  
                </ul>
          </div> 
       </div>         
    </div>

    <div data-role="page" id="registerPage2">
            <div data-role="header"><h1>Registration</h1></div>
            <div data-role="content">
                <div data-role="fieldcontainer">
                    <label for="number">Number:</label>
                    <input type="number">
                    <label for="birthDay">Birthday:</label>
                    <input type="date">
                    <label for="city">City:</label>    
                    <input list="cities" name="cities" >
                    <datalist id="cities">
                       <option value="İzmir"></option>
                       <option value="İstanbul"></option>
                       <option value="Ankara"></option>
                       <option value="Bursa"></option>
                       <option value="Antalya"></option>
                       <option value="Denizli"></option>
                    </datalist>                
                </div>            
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" data-rel="back" data-role="button" data-icon="arrow-l" data-iconpos="left" data-corners="false">Back</a></li>
                        <li><a href="#" class="nextBtn" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a></li>                        
                    </ul>
                </div>

            </div>


     </div>
</body>
</html>
4

5 回答 5

1

在继续之前检查变量。

$(document).ready(function () {
  $(".nextBtn").click(function () {
    var text = $(this).val();
    if (text){
    //process
    }
    else{
    //failed to process, give alert
    }
  });
});
于 2013-10-24T06:47:20.960 回答
0

你所做的只是正确的。只需在 if 条件下尝试 (uText == "") ：

$(document).ready(function () {
              $(".nextBtn").click(function () {
                  $('input:text').each(function (i) {
                      var uText = $(this).val();
                      if (uText == "")
                        alert("alanlar boş olamaz!")                     
                        return;
                  });

              });
          });
于 2013-10-24T06:44:13.523 回答
0

你可以这样做：

$(".nextBtn").click(function () {

    // Get all the empty input textbox
    var $inputs = $('input:text').filter(function () {
        return $.trim(this.value) === '';
    });

    // If the number of empty textbox is more then 0
    if($inputs.length > 0){
        alert("alanlar boş olamaz!");
        return false;  // stop the next button action
    }    
    return true;
});
于 2013-10-24T06:44:40.167 回答
0

而不是下面的代码：

if (!uText)
  alert("alanlar boş olamaz!")

使用以下代码：

if (!uText || uText == '') {
  alert("alanlar boş olamaz!");
  return false;
}
于 2013-10-24T06:45:06.103 回答
0

您可以使用

if(uText.length==0)
于 2013-10-24T06:45:59.940 回答