JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form id="form" method=POST action="{{ url_for('login') }}" onclick="return false">
                <div class="form-group">
                    <label for="exampleInputID1">ID</label>
                    <input type="text" class="form-control" id="id" name="id" placeholder="ID">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputName1">Name</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="Name" value="原本的名字">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input type="text" class="form-control" id="email" name="email" placeholder="Email">
                </div>
                <button type="submit" class="btn btn-primary btn-block" id="register">Register</button>
            </form>
            <br>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function(){
    $("#register").click(function(){
        if($("#id").val()==""){
            alert("你尚未填寫帳號");
            eval("document.form['id'].focus()");
        }else if($("#password").val()==""){
            alert("你尚未填寫密碼");
            eval("document.form['password'].focus()");
        }else if($("#name").val()==""){
            alert("你尚未填寫名字");
            eval("document.form['name'].focus()");
        }else if($("#email").val()==""){
            alert("你尚未填寫信箱");
            eval("document.form['email'].focus()");
        }else{
            document.getElementById("form").submit();						
        }
    })
 })
 
 $("#id").val("123")
 

$('#name').on('focusin', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
});

$('#name').on('change', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
    if (prev == '123' && current == '456') {
       alert("請填寫密碼!")
    	 $("#password").focus()
    }
});