Html / Javascript / Css如何检查输入是否为空

时间：2016-09-13 12:48:33

标签： javascript jquery html css input

我有6个不同的输入字段，我想这样做你必须填写所有这些字段，否则会弹出一条警告信息。关于如何做到这一点的任何提示？

我也遇到了不同font-style选项的问题。当您单击font-style的不同选项时，您在输入字段中写入的文本应该更改，文本也会更改为“förtag”，依此类推。

这是我的代码：

function SkrivUt() {
  var el = document.getElementById('f');
  el.style.color = document.getElementById('textColor').value;
  el.style.fontStyle = document.getElementById('selectedFont').value;
  el.style.backgroundColor = document.getElementById('backGroundColour').value;

  $("#area1").html($("#foretagText").val());
  $("#area2").html($("#efternamnText").val());
  $("#area3").html($("#fornamnNamnText").val());
  $("#area4").html($("#titleText").val());
  $("#area5").html($("#telefonText").val());
  $("#area6").html($("#epostText").val());
  $("#visitkort").hide();
  $("#visitkortsDemo").show();
}

function reset() {
  document.getElementById('foretagText').value = "";
  document.getElementById('efternamnText').value = "";
  document.getElementById('fornamnNamnText').value = "";
  document.getElementById('titleText').value = "";
  document.getElementById('telefonText').value = "";
  document.getElementById('epostText').value = "";
}
.form-style-3 {
  max-width: 400px;
  max-height 400px;
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.form-style-3 label {
  display: block;
  margin-bottom: 10px;
}
.form-style-3 label span {
  float: left;
  width: 150px;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  margin: 0px 0px 10px 0px;
  border: 1px solid #FFD2D2;
  padding: 20px;
  background: lightblue;
  box-shadow: inset 0px 0px 15px #FFE5E5;
  -moz-box-shadow: inset 0px 0px 15px #FFE5E5;
  -webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
/*Format legent inom ett fieldset*/

.form-style-3 fieldset legend {
  color: #FFA0C9;
  border-top: 1px solid #FFD2D2;
  border-left: 1px solid #FFD2D2;
  border-right: 1px solid #FFD2D2;
  border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  background: #FFF4F4;
  padding: 0px 8px 3px 8px;
  box-shadow: -0px -1px 2px #F1F1F1;
  -moz-box-shadow: -0px -1px 2px #F1F1F1;
  -webkit-box-shadow: -0px -1px 2px #F1F1F1;
  font-weight: normal;
  font-size: 12px;
}
.select-field {
  background: gray;
  color: white;
  border-radius: 5px 5px 5px 5px;
}
.input-field {
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: red
}
<!DOCTYPE html>
<html>

<head>
  <title>Visitkort</title>
  <link rel='stylesheet' type='text/css' href='Style.css' />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>

  <div class="form-style-3">
    <div id="visitkort" style='display:block'>
      <fieldset>
        <legend>Visitkort</legend>
        <label><span>Företaget</span>
          <input type="text" id="foretagText" />
        </label>
        <label><span>Efternamn </span>
          <input type="text" id="efternamnText" />
        </label>
        <label><span>Förnamn </span>
          <input type="text" id="fornamnNamnText" />
        </label>
        <label><span>Titel </span>
          <input type="text" id="titleText" />
        </label>
        <label><span>Telefon </span>
          <input type="text" id="telefonText" />
        </label>
        <label><span>Epost </span>
          <input type="text" id="epostText" />
        </label>
        <label>
          <span>Välj bakgrundsfärg</span>
          <select class="select-field" id="backGroundColour">
            <option value="RoyalBlue">Blå</option>
            <option value="Yellow">gul</option>
            <option value="Crimson">Röd</option>
          </select>
        </label>
        <label>
          <span>Välj Textfärg</span>
          <select class="select-field" id="textColor">
            <option value="RoyalBlue">Blå</option>
            <option value="Yellow">Gul</option>
            <option value="Crimson">röd</option>
          </select>
        </label>
        <label>
          <span>Välj typsnitt</span>
          <select class="select-field" id="selectedFont">
            <option value="Verdana">Verdana</option>
            <option value="Ariel">Ariel</option>
            <option value="Impact">Impact</option>
            <option value="Tahoma">Tahoma</option>
          </select>
        </label>

        <label><span><button type="button" onclick="reset()">Nollställ</button></span><span><button type="button"  onclick="SkrivUt()">Skriv ut</button></span>
        </label>

      </fieldset>

    </div>

    <div id="visitkortsDemo" style='display:none'>
      <fieldset id="f">
        <legend>Förgranskning av visitkort</legend>
n>Företaget </span>
          <p id="area1"></p>
        </label>
        <label><span>Efternamn </span>
          <p id="area2"></p>
        </label>
        <label><span>Förnamn </span>
          <p id="area3"></p>
        </label>
        <label><span>Titel </span>
          <p id="area4"></p>
        </label>
        <label><span>Telefon </span>
          <p id="area5"></p>
        </label>
        <label><span>Epost </span>
          <p id="area6"></p>
        </label>
      </fieldset>
    </div>
  </div>
</body>

</html>

6 个答案:

答案 0 :(得分：4)

一种简单快捷的方法是使用HTML5的required属性！

示例：

<input type="text" id="foretagText" required />

这将产生浏览器警报，当输入时字段是空的。不需要困难的自定义Javascript。

答案 1 :(得分：2)

你没有尝试过多少，所以我不仅仅是回答，但这是一个想法，用原始的javascript。你需要一种更好的收集输入ID的方法，这取决于你。

    <script>
   function details(id)
   {
     var data = { "id" : id };
     jQuery.ajax({
     url : <?= BASEURL; ?>+'includes/detailmodal.php',
     method : 'POST',
     data : data,
     success : function(data){
      $('body').append(data);
      $('#details-modal').modal('toggle');
      },
      error : function(){
      alert("something went wrong")
      }
     });
     }
    </script>
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    </body>
    </html>

答案 2 :(得分：2)

// create your err array
var err = [];

//test if values are a blank string
if($("#foretagText").val() === ""){

 //add the error message to your error array
  err.push("Foretag not entered");

}
// be sure you only have if statements and they aren't nested like this
if($("#idOfNextValue").val() === ""){

 //add the error message to your error array
  err.push("Foretag not entered");

}
//alert all messages in your error array.
alert (err.length + " Errors:<br>" +err.join("<br>"));//join

答案 3 :(得分：1)

在HTML5中，您可以使用以下必需属性; 

<input type="text" required>

或者在jQuery中：

我们说HTML：

<input type="text" id="input-1">
<input type="text" id="input-2">
<input type="text" id="input-3">
<input type="text" id="input-4">

依旧......

现在jQuery 

if($("[id^=input]").val()=="")
{
  alert("error");
  return;
}

答案 4 :(得分：1)

HTML方式：使用必需属性

<input type="text" id="somename" required>

Javascript方式：

if ($('#foretagText').val() == '' || $('#efternamnText').val() != ' ...) {
   alert("Fields empty");
 }

答案 5 :(得分：0)

第一个问题。要求用户在选择中选择一个值，您必须添加所需的atributte，如此

                    <select class="select-field" id="backGroundColour" required>
                        <option value="RoyalBlue">Blå</option>
                        <option value="Yellow">gul</option>
                        <option value="Crimson">Röd</option>
                    </select></label>

对于你的第二个问题，我对此并不完全确定，但我认为问题在于你试图直接改变标签样式而不改变相关的css。

相关问题
最新问题