我正在尝试将警报应用于动态jquery表单

时间:2014-11-14 16:12:08

标签: javascript jquery html

我正在尝试将警报应用于动态jquery表单,该表单在空闲时显示错误。它运行时没有显示任何错误。

代码将表单打印为slidedown div的一部分。

HTML的代码是:

(div出现在前一个上面)

<form method="post" id="frm" name="frm">
    <div id="fnamelogin">
        <label for="firstname">First Name:
            <input type="text" name="firstname" placeholder="Enter First Name" id="fname" />
        </label>
    </div>
    <div id="lnamelogin" style="display: none;">
        <label for="lastname">Last Name:
            <input type="text" name="lastname" placeholder="Enter Last Name" id="lname" />
        </label>
    </div>
    <div style="display: none;" id="idlogin">
        <label for="mailid">E-Mail ID:
            <input type="text" name="usermail" placeholder="Enter Mail Id" id="email" />
        </label>
    </div>
    <div style="display: none;" id="passlogin">
        <label for="password">Password:
            <input type="password" name="userpass" placeholder="Enter your Password" />
        </label>
    </div>
    <div style="display: none;" id="courselogin">
        <label for="course" style="color: white;">Enter Course:
            <br></br>
            <input type="radio" name="usercourse" id="courselogin" value="MBA" />MBA</label>
    </div>
    <div style="display: none;" id="streamlogin">
        <label for="stream">STREAM
            <select name="stream">
                <option>CSE</option>
                <option>IT</option>
                <option>ECE</option>
            </select>
        </label>
    </div>
    <label for="teacherremember">
        <input class="checkbox" type="checkbox" name="teacherremember" id="teacherremember" checked="checked" />Remember me</label>
    <p>
        <input name="submit" type="submit" id="submit" value="Submit Form" />
</form>

用于检查空字段的Javascript是:

$('#frm').submit(function() {

if ($.trim($("#fname").val()) === "" || $.trim($("#lname").val()) === "")
    {       
        alert('you did not fill out one of the fields');   
    }
});

1 个答案:

答案 0 :(得分:0)

您可以使用HTML5路线进行表单验证。您可以在输入中使用Required Pattern属性。看到这个小提琴:http://jsfiddle.net/9aLp84dt/

required属性使得表单无法在输入中没有数据的情况下提交。 pattern确保输入中的数据符合Regex定义的约束。

唯一的问题是浏览器支持。确保在所有目标浏览器中测试您的代码。