使JS警报看起来更专业

Question

有人可以帮助我使这个警报看起来更好吗？像Maybe拆分每个文本框都在自己的行上？我无法弄清楚如何让这个看起来更清洁，而不仅仅是堆积在一条线上。

要查看警报点击Lien单选按钮，然后点击下一步而不填写文本框

http://jsfiddle.net/t4Lgm0n2/9/

＆＃13;

＆＃13;

function validateForm(){
	var QnoText = ['lien'];  // add IDs here for questions with optional text input
	var ids = '';
	flag = true;
	for (i=0; i<QnoText.length; i++) {
		CkStatus = document.getElementById(QnoText[i]).checked;
		ids = QnoText[i]+'lname';
        var eD = "";
		if (CkStatus && document.getElementById(ids).value == '') {
			eD = eD+' lienholder name';
			document.getElementById(ids).focus();
			flag = false;
		}
		ids2 = QnoText[i]+'laddress';
		if (CkStatus && document.getElementById(ids2).value == '') {
			eD=eD+' lienholder address';
			document.getElementById(ids2).focus();
			flag = false;
		}
		ids3 = 'datepicker2';
		if (CkStatus && document.getElementById(ids3).value == '') {
			eD=eD+' lien date';
			document.getElementById(ids3).focus();
			flag = false;
		}
        if(eD!="") alert("Please enter "+eD);
	}
  return flag;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="Yes" name="lien" id="lien" required="yes" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>

&nbsp;&nbsp;&nbsp;<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>

<script type="text/javascript">
function showhideForm(lien) {
    if (lien == "Yes") {
        document.getElementById("div1").style.display = 'block';
        document.getElementById("div2").style.display = 'none';
    } 
   else if (lien == "None") {
        document.getElementById("div2").style.display = 'block';
        document.getElementById("div1").style.display = 'none';
		$("#div1 > .clearfix input:text").val("");
    }
}
</script>

<div id="div1" style="display:none">
<div class="clearfix">
<label for="lname">Lienholder Name:</label>&nbsp;&nbsp;&nbsp;
            <input type="text" name="lienlname" validateat="onSubmit" validate="maxlength" id="lienlname" size="54" maxlength="120" message="Please enter lienholder name." value="">
            </p>
            <p>
            <label for="laddress">Lienholder Address:</label>
            <input type="text" name="lienladdress" validateat="onSubmit" validate="maxlength" id="lienladdress" size="54" maxlength="120" message="Please enter lienholder address." value="">
            </p>
            <p>
            <label for="ldate">Date of Lien:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="lienldate" id="datepicker2" mask="99/99/9999" value="">
                </div>
                </div>
                <div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
                <input type="submit" name="submit" value="Next" onclick="validateForm()">

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用换行符\n来提高文字的可读性：

var eD = [];

if (CkStatus && document.getElementById(ids).value == '') {
    eD.push('Please enter lienholder name');
    document.getElementById(ids).focus();
    flag = false;
}

// ...

if (eD.length) alert(eD.join('\n'));

正如您所看到的，我还将错误消息推送到ed数组中，这样可以更方便地使用.join()方法连接生成的消息。

演示：http://jsfiddle.net/t4Lgm0n2/11/