HTML5の入力要素をpatternを使えば制限できることをしりました。

<form action="sample-input.php" method="post" target="_blank">
    <p>
        <label>
            郵便番号:
            <input name="sampleName" pattern="\d{3}-\d{4}" title="郵便番号は、「123-4567」のように、「3桁の数字、ハイフン(‐)、4桁の数字」の順で入力して下さい。">
        </label>
    </p>
    <p><input type="submit" value="送信"></p>
</form>

これがtype="submit" ではなく、type="button"で発生するやり方はないのでしょうか?
もしくは、submitを押す前にtextを入力中に該当しない文字を入れた瞬間にエラーメッセージを発動することはできないのでしょうか?