title: Login alert from external javascript
body: <p>I want a <code>alert</code> if the password is incorrect and required fields are not given using jQuery.<br>
  I strucked on some logic.</p>
  
  <p>Thanks in advance..</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;input class="form-control" type="text" required="" id = "stu_id" placeholder=" Id"&gt;
  &lt;input class="form-control" type="password" required="" id = "passwd" placeholder="Password"&gt;
  
  &lt;a href="javascript:void(0);"  onclick="stu_login();"  type="submit"&gt;Log In&lt;/a&gt;
  
  //here i want to display alert if required fields and password is incorrect
  &lt;div align ="right" id = "login_status"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>This is my <strong>login_check.js</strong> </p>
  
  <pre><code>function stu_login() {
    var stu_id = $("#stu_id").val();
    var stu_passwd = $("#passwd").val();
  
    if(stu_id == "")
    {
      $("#login_status").html('&lt;div class="info" id="sa-basic"&gt;Please enter your ID to proceed.&lt;/div&gt;');
      $("#stu_id").focus();
  
      else if(stu_passwd == "")
      {
        $("#login_status").html('&lt;div class="info" id="sa-basic"&gt;Please enter 
        your account password to go.&lt;/div&gt;');
        $("#passwd").focus();
      }
      else
      {
        var dataString = 'stu_id=' + stu_id + '&amp;passwd=' + stu_passwd + '&amp;page=users_login';
        $.ajax({
          type: "POST",
          url: "login_check.php",
          data: dataString,
          cache: false,
          beforeSend: function() 
          {
            $("#login_status").html('&lt;br clear="all"&gt;&lt;br clear="all"&gt;&lt;div 
            align="left"&gt;&lt;font style="font-family:Verdana, Geneva, sans-serif; 
            font-size:15px; color:black;"&gt;Please wait&lt;/font&gt; &lt;img 
            src="images/loadings.gif" alt="Loading...." align="absmiddle" 
            title="Loading...."/&gt;&lt;/div&gt;&lt;br clear="all"&gt;');
          },
          success: function(response)
          {
            var response_brought = response.indexOf('login_process_completed_successfully=yes');
            if (response_brought != -1) 
            {
              $("#login_status").html('');
              //window.location.replace(response);
              window.location ="home.php";
            }
            else
            {
              $("#login_status").fadeIn(1000).html(response);
            }
          }
        });
      }
    }
  </code></pre>
  
  <p><strong>In the code I can easily display message from <code>login_check.js</code> to <code>index.html</code>, but I don't know how to give the alert from alert.js.</strong> I want to replace message from <code>login_check.js</code> and make a pop up alert.</p>
  
  <p>Here is my <strong>alert.js</strong> </p>
  
  <pre><code>!function ($) {
  "use strict";
  
  var SweetAlert = function () {
  };
  
  SweetAlert.prototype.init = function () {
  
    //Basic
    $('#sa-basic').click(function () {
      swal("Here's a message!");
    });
    //init
    $.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
  }(window.jQuery),
  
  //initializing 
  function ($) {
    "use strict";
    $.SweetAlert.init()
  }(window.jQuery);
  </code></pre>