Html/Javascript/Css, как проверить, являются ли входы пустыми

У меня есть 6 разных полей ввода, и я хочу сделать это, вам нужно заполнить их все, иначе появится всплывающее предупреждающее сообщение. Любые советы о том, как это сделать?Html/Javascript/Css, как проверить, являются ли входы пустыми

У меня также есть проблемы с опцией для разных font-style s. Когда вы нажимаете на различные параметры для font-style, текст, который вы написали во входном файле, должен измениться, а также текст infront «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>

источник

2016-09-13 user6826584

Вы не пробовали много, так что им не только собирается дать ответ, но вот идея, в сыром JavaScript. Очевидно, вам нужен лучший способ сбора входных идентификаторов, это зависит от вас.

<script> 

var inputs = ["inputid1", "inputid2", "inputid3"]; 
var notFilled = ""; 
for (var i in inputs){ 
    element = document.getElementById(i); 
    if(element.value==""){ 
     notFilled = i; 
     break; 
    } 
} 

if(notFilled!=""){ 
    alert("you must fill" + notFilled); 

} 

</script>

источник

2016-09-13 12:53:59

извините, но это довольно плохое решение по нескольким причинам - очень удивило, что он получил преимущество ... –

О, я знаю ... Но это основано на том, что он мне дал. Я бы не сделал этого так и не использовал raw js, как это. –

было бы лучше использовать «break» из цикла, хотя, если вы найдете тот, который не заполнен, или используйте 'Array.prototype.some()'. Также не используйте отрицательные имена переменных, это делает код намного сложнее читать. –

В 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; 
}

источник

2016-09-13 12:55:51

Простой и быстрый способ будет использовать HTML5 required атрибут!

Пример:

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

Это произведет оповещение браузера, когда поле ввода пусто. Не требуется сложный пользовательский Javascript.

источник

2016-09-13 12:56:31 andreas

HTML способ: Использовать обязательный атрибут

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

Javascript путь:

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

источник

2016-09-13 12:59:39 KrishCdbry

// 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

источник

2016-09-13 13:04:39

Спасибо! Могу ли я сделать это, я получаю всплывающее окно каждый раз, когда некоторые поля ввода пустые, а не только один? :) – user6826584

да вы делаете оператор if для всех своих значений. то вместо того, чтобы сделать это предупреждение в выражении if, вы просто помещаете текст в массив, чтобы содержать все ваши сообщения об ошибках. затем присоединитесь к массиву с помощью array.join («
») и сообщите об этом сообщении. Я сделал редактирование для моего кода для примера. –

также удостоверяются, что все они разные. так что каждый тест будет запущен –

Для вашего первого вопроса. Для того, чтобы требовать от пользователя, чтобы выбрать значение в отборном вы должны добавить 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.

источник

2016-09-13 13:05:12

Html/Javascript/Css, как проверить, являются ли входы пустыми

ответ

Смежные вопросы