Question

所以我能够以我想要的方式使用javascript控制表单（至少提供表单提交功能），并且此代码笔上有一个活动的工作表单。但是，当表单“无效”时，我无法将引导输入类“has-error”应用于此表单并将输入的颜色转换为输入红色。有关“has-error”类的更多内容可以在这里找到：http://getbootstrap.com/css/#forms-control-validation

https://codepen.io/MaineCannabisKid/pen/ZymzJO

这是表格代码

MultiIndex

这是javascript

<form class="navbar-form navbar-nav search-form" method="get" action="search.php" name="searchForm" id="searchForm">
    <!-- hidden type input -->
    <input type="hidden" name="searchType" id="searchType" value="users" required>
    <div class="input-group">
        <input type="text" id="searchInput" name="searchInput" class="form-control" aria-label="Search the site" placeholder="Search Users">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" id="searchFormSubmit">Search</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" id="searchForm-users">Users</a></li>
                <li><a href="#" id="searchForm-another">Another Search</a></li>
            </ul>
        </div>
    </div>
</form>

Answer 1

这将解决您的问题。

// create new user and send results to mysql database
let url = NSURL (string: "http:/websitename.php")!
let request = NSMutableURLRequest (url: url as URL)
request.httpMethod = "POST"
print ("Request: \(request)")

// body for the request
let body = "user_username=\(usernameTxt.text!.lowercased())&user_password=\(passwordTxt.text!)&user_email=\(emailTxt.text!)&user_fullname=\(fullnameTxt.text!)"

request.httpBody = body.data(using: String.Encoding.utf8)
print("Request: \(request)")
print("RequestBody: \(String(describing: request.httpBody))")

URLSession.shared.dataTask(with: request as URLRequest, completionHandler: {(data:Data?, response: URLResponse?, error: Error?) in
    // no error
    if (error == nil) {
        // send the request to the server
        print("Going to send the request to the server")

        // communicate back to UI
        DispatchQueue.main.async {
            do {
                let json = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers) as? NSDictionary

                guard let parseJSON = json else {
                    print ("There was an error while parsing the JSON data")
                    return
                }

                // get the ID from the JSON struct
                let id = parseJSON["id"]

                // if there is an ID then login
                if (id != nil) {
                    // save user information we received from our host
                    UserDefaults.standard.set(parseJSON, forKey: "parseJSON")
                    user = UserDefaults.standard.value(forKey: "parseJSON") as? NSDictionary

                    // go to tabbar or homepage
                    DispatchQueue.main.async {
                        appDelegate.login()
                    }
                } else {
                    // get main queue to communicate back to user
                    DispatchQueue.main.async(execute: {
                        let message = parseJSON["message"] as! String
                        appDelegate.infoView(message: message, color: colorSmoothRed)
                    })
                }
            } catch {
                // communicate back to UI
                DispatchQueue.main.async(execute: {
                    let message = error as! String
                    appDelegate.infoView(message: message, color: colorSmoothRed)
                })
            }
        }
    } else {
        // get main queue to communicate back to user
        DispatchQueue.main.async(execute: {
            let message = error!.localizedDescription
            appDelegate.infoView(message: message, color: colorSmoothRed)
        })
    }
    // launch prepared session
}).resume()

注意：输入周围的行显示在$("#searchInput").parent().addClass("has-error");中，但由于您的背景颜色，它不会被眼睛看到。

red

console.log("Navbar.js Connected");

// Search Form Validate Function
function searchFormValidate() {
  // Check is Search Input value is null, if so return false (Validation didn't pass)
  return $('#searchInput').val() == "" ? false : true;
}

// When Search Users is clicked on
$('#searchForm-users').on('click', function() {
  $('#searchType').val('users');
  $('#searchInput').attr("placeholder", "Search Users");
});

// When Another Search is clicked on
$('#searchForm-another').on('click', function() {
  $('#searchType').val('another');
  $('#searchInput').attr("placeholder", "Search Something Else");
});

// When Search is clicked Submit Form
$("#searchFormSubmit").on('click', function() {
  if (searchFormValidate()) {
    // form valid submit form
    document.searchForm.submit();
  } else {
    // form isn't valid, turn has-error on
    console.log("Validation Error");
    $("#searchInput").parent().addClass("has-error");
  }
});

/* Navbar */

.navbar-default {
  margin: 0 auto;
  border-radius: 0;
  z-index: 100;
  background-color: transparent!important;
  border-color: transparent!important;
}


/* Navbar Search Form */

.search-form .btn-default {
  background: #ac3911;
  border-color: rgba(149, 48, 15, 1);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent!important;
}


/* Drop Down Button */

.search-form .btn-default.dropdown-toggle {
  border-left: 1px solid rgba(149, 48, 15, 1);
}


/* End Navbar Search*/

Bootstrap Navbar搜索表单输入错误类未应用

1 个答案: